With the following config, I have been able to get hot module replacement working with HotModuleReplacementPlugin(), but not by using --hot when running the webpack-dev-server. My question is, why?
Almost all recent guides to setting up hot module replacement use --hot, but it doesn't work for me.
var webpack = require("webpack");
var path = require("path");
const config = {
entry: path.resolve(__dirname, 'app/index.js') ,
output: {
path: path.resolve(__dirname, 'output'),
filename: 'bundle.js',
publicPath: "static/"
},
module: {
rules: [
{test: /\.(js|jsx)$/, use: 'babel-loader'}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
};
module.exports = config;
I am referencing my code file like so.
<script src="static/bundle.js"></script>
I am running my server like so.
webpack-dev-server --inline --colors --progress
Version.
webpack-dev-server 2.3.0
webpack 2.2.1
With this setup, hot module loading is working correctly. If I remove the plugin, and run the server appending --hot (as I've seen in many examples), my hot module loading doesn't work. The server registers the change, the transpile happens, my webpage appears like it's reloading, but the content does not update.
I'm accessing through http://localhost:8080/webpack-dev-server/index.html
Structure looks like this + a node_modules directory.
.
├── app
│ └── index.js
├── index.html
├── output
│ ├── bundle.js
│ └── index.js
├── package.json
└── webpack.config.js
Update
Have also tried adding devServer to the webpack config, which has the same result.
devServer: {
compress: true,
publicPath: "http://localhost:8080/static/",
filename: "bundle.js",
hot: true,
inline: true
}
You might want to add this as well:
entry: {
'app': [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
`${PATHS.SOURCE}/index.jsx`
]
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With