- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
构建一个 React 应用程序来学习,发现 webpack 可以帮助我处理 HMR。
但是当我更改组件(JSX)中的某些内容时,它不会更新并给出以下内容:
The following modules couldn't be hot updated: (They would need a full reload!)
log.js:26 Ignored an update to unaccepted module ./src/App.js -> ./src/index.js -> 0
代码:
网络包:
const path = require("path");
const webpack = require("webpack");
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: "./src/index.js",
mode: "development",
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: "babel-loader",
options: { presets: ["@babel/env"] }
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
resolve: { extensions: ["*", ".js", ".jsx"] },
output: {
path: path.resolve(__dirname, "dist/"),
publicPath: "/dist/",
filename: "bundle.js"
},
// devServer: {
// contentBase: path.join(__dirname, "public/"),
// port: 3000,
// publicPath: "http://localhost:3000/dist/",
// hotOnly: true,
// historyApiFallback: true
// },
// plugins: [new webpack.HotModuleReplacementPlugin()]
plugins: [new HtmlWebpackPlugin({
template: './public/index.html',
filename: 'index.html',
inject: 'body'
}),
new webpack.HotModuleReplacementPlugin()],
devServer: {
contentBase: path.join(__dirname, "public/"),
port: 3000,
publicPath: "http://localhost:3000/dist/",
historyApiFallback: true,
hotOnly: true
}
};
Json:
{
"name": "reactpluralsight",
"version": "1.0.0",
"description": "PluralSightTutorial",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --open"
},
"author": "MrCode",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.4.5",
"@babel/preset-env": "^7.4.5",
"@babel/preset-react": "^7.0.0",
"babel-cli": "^6.26.0",
"babel-loader": "^8.0.6",
"css-loader": "^3.0.0",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.23.1",
"webpack": "^4.33.0",
"webpack-cli": "^3.3.4",
"webpack-dev-server": "^3.7.1",
"webpack-hot-middleware": "^2.25.0"
},
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6"
}
}
通天塔:
{
"presets": ["@babel/env", "@babel/preset-react"]
}
应用程序.js:
import React, { Component} from "react";
import "./App.css";
import { Hello } from "./The basics/FirstComponent"
import { Hook } from './The basics/FirstHook'
// import { HookC } from './The basics/FirstHookChallange'
class App extends Component{
render(){
return(
<div className="App">
<Hello/>
<Hook/>
{/* <HookC/> */}
</div>
);
}
}
export default App;
有点令人恼火的是,这昨天还有效,但今天由于某种原因它停止了。我正在研究三个 JSX 组件:
Hello Hook HookC
但是当我更改其中的某些内容时,我总是在浏览器中收到相同的日志消息。
如何解决这个问题?
编辑:不知道这是否重要,但我正在使用 npm 和 gitbash。
最佳答案
过了一段时间,我明白了这一点。
我原来的 webpackconfig 看起来与问题中的情况相当不同,但我无法让它工作,所以我尝试了一些其他尝试。
最大的问题是 devserver.hotOnly,根据文档:
Enables Hot Module Replacement (see devServer.hot) without page refresh as fallback in case of build failures.
事实证明,这具有误导性,因为当您删除 hotonly 属性并拥有如下配置时:
const path = require("path");
const webpack = require("webpack");
module.exports = {
entry: "./src/index.js",
mode: "development",
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: "babel-loader",
options: { presets: ["@babel/env"], plugins: ["transform-class-properties"] }
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
resolve: { extensions: ["*", ".js", ".jsx"] },
output: {
path: path.resolve(__dirname, "dist/"),
publicPath: "/dist/",
filename: "bundle.js"
},
devServer: {
contentBase: path.join(__dirname, "public/"),
port: 3000,
publicPath: "http://localhost:3000/dist/",
historyApiFallback: true
},
plugins: [new webpack.HotModuleReplacementPlugin()]
};
HMR 有效。
找到相关信息here
关于javascript - 如何解决 "The following modules couldn'不热更新: (They would need a full reload!)”,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56648279/
我有 4 个文件。 C:\perlCode2\start.pl6 C:\perlCode2\file0.pm6 C:\perlCode2\folder1\file1.pm6 C:\perlCode2\
我有一个结构如下的模块: /module __init__.py /submod_1 __init__.py submod_1_class.py
我的源代码在 java 7 上编译并在 java 11 上运行。 我正在尝试将 imperva RASP 作为 java 代理集成到 tomcat 中。但是,当我启动 tomcat 服务器时,它抛出以
justExport.js const first = () => { console.log('frist from justExport') } const second = () => {
以下模块用JS文件编写: module.exports = { propA: 1, propB: 2 } 允许稍后从模块导入属性,如:从“路径/到/模块”导入 { propA} 然而,将文件格
我一直在尝试在嵌套的惰性加载模块中实现ngx翻译,但一直未能如愿。我面临的唯一问题是,每当我通过选择器更改语言时,嵌套延迟加载模块中的语言都不会更改。 HttpLoader 工作正常,其他一切工作正常
我没有可重复的示例,因为问题更多是关于模块如何工作。我试图了解如何将一些 react 功能从一个模块传递到下一个模块。过去我收到过有关使用 ObserveEvent 的回复,但是当我在一个模块中使用响
我正在阅读Wikipedia's definition of Dependency inversion principle ,它使用了两个术语高级模块和低级模块,我无法弄清楚。 它们是什么以及依赖倒置
问题 我遇到的一个问题是将两个模块的类型和值带入一个新的组合模块中。我举个例子。目前我有以下两种类型签名 module type Ordered = sig type t (* the type
我是 JavaScript 的新手,最近一直在努力处理导入问题。有一件事我无法理解。 在较旧的节点模块(主要是那些在 ES6 之前出现的模块)中,可以使用 npm 安装,例如 express,通常没有
我正在尝试使用 System.JS 将 material-ui 导入我的 React 应用 在我的应用中,我这样做: import {AppBar, Tabs, Tab, Card, CardTitl
我想使用功能module->exports查找模块提供的所有导出。不幸的是,传递给该函数的模块必须在当前命名空间中声明,然后才能在其上使用该函数。当我静态地知道模块是什么时,这没问题,我只需要将其引入
目录结构如下 outdir |--lib |--- __init__.py |--- abc.py |--indir
这与提到的非常相似 here但是评论或回答中提供的每个解决方案都没有解决我的问题。想看看是否还有其他我应该看的东西。我尝试了不同的路径,比如 ./app/mycomponent/mycomponent
我有两个 Angular 模块:main 和 feature: 主/根模块: @NgModule({ imports: [ StoreModule.forRoot({route
我尝试在 Ubuntu 04.12 LTS x64 中安装“Userful MultiSeat-X64-5.0.1 ...”,在安装结束时遇到以下错误: File "", line 6, in Im
我正在尝试优化我的 vendor bundle.js,因为它已经膨胀并且我正在使用 material-ui 库。 import Card from 'material-ui'; // Very bad
错误: Import-Module : The specified module 'msonline' was not loaded because no valid module file was
我在 Server 2008 SP2(64 位)上执行导入模块 ActiveDirectory 时遇到问题。 NET Framework 3.5 SP1 已安装 我下载了 Windows6.0-KB9
嗯,你好! 我正在编写一个脚本来获取 Sql 作业历史记录,并且需要使用“SqlServer”模块。它已安装,但由于上面的错误消息,我无法导入它。当我到达模块路径时,文件夹“SqlServer”存在并
我是一名优秀的程序员,十分优秀!