我是React和React Hot Loader的新手。我有一个Symfony 2.7应用程序,并开始使用webpack并做出反应。
一般来说一切正常,但是当我想使用Hot Reloading时,我收到错误:
Ignored an update to unaccepted module ./app/Resources/js/app.js -> 0
[HMR] The following modules couldn't be hot updated: (They would need a full reload!)
[HMR] - ./app/Resources/js/app.js
我在这里遗漏了什么基本的东西。我很新,所以这可能是一个简单的答案。非常感谢
这是我的基本代码:
的package.json
"dependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-hot-loader": "^1.3.1",
"webpack-dev-server": "^2.6.1"
}
app.js
import React from 'react';
import ReactDOM from 'react-dom';
// import ReactHotLoader from 'react-hot-loader';
import Component from './component.js';
// const element = ;
ReactDOM.render(
<h1>Hello, world app </h1>
,
document.getElementById('app')
);
webpack.config.js:
var path = require('path');
var webpack = require('webpack');
var node_modules_dir = path.join(__dirname, 'node_modules');
var config = {
entry: [
'webpack-dev-server/client?http://127.0.0.1:3000',
'webpack/hot/only-dev-server',
'./app/Resources/js/app.js',
],
output: {
path: path.join(__dirname, 'web/dist'),
filename: 'bundle.js',
publicPath: 'http://127.0.0.1:3000/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
],
module: {
loaders: [
{
test: /\.js?$/,
include: path.join(__dirname, 'app/Resources/js'),
loader: "babel-loader",
query: {
presets:['react']
}
}
]
}
};
module.exports = config;
启动webpack dev服务器时的输出:
node webpack.dev-server.js l
Listening at 0.0.0.0:3000
Hash: 8c2dd25b4ae931392c17
Version: webpack 3.4.1
Time: 1977ms
Asset Size Chunks Chunk Names
bundle.js 1.09 MB 0 [emitted] [big] main
[50] (webpack)/hot/log.js 1.04 kB {0} [built]
[85] ./node_modules/react/react.js 56 bytes {0} [built]
[118] multi webpack-dev-server/client?http://127.0.0.1:3000 webpack/hot/only-dev-server ./app/Resources/js/app.js 52 bytes {0} [built]
[119] (webpack)-dev-server/client?http://127.0.0.1:3000 5.83 kB {0} [built]
[120] ./node_modules/url/url.js 23.3 kB {0} [built]
[126] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
[128] ./node_modules/loglevel/lib/loglevel.js 6.74 kB {0} [built]
[129] (webpack)-dev-server/client/socket.js 856 bytes {0} [built]
[161] (webpack)-dev-server/client/overlay.js 3.6 kB {0} [built]
[166] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
[168] (webpack)/hot/only-dev-server.js 2.37 kB {0} [built]
[169] (webpack)/hot/log-apply-result.js 1.31 kB {0} [built]
[170] ./app/Resources/js/app.js 295 bytes {0} [built]
[186] ./node_modules/react-dom/index.js 59 bytes {0} [built]
[272] ./app/Resources/js/component.js 255 bytes {0} [built]
+ 258 hidden modules
webpack: Compiled successfully.