Webpack dev server does not restart automatically

Question

So, I installed webpack and webpack-dev-server , but webpack-dev-server does not restart automatically. If I modify the file and save it, there will be no changes in the browser until I manually multiply it.

Here is my webpack configurator and my script file that runs webpack-dev-server . Does anyone see anything that could interfere with the automatic reboot?

I combined them by reading several manuals, documents, and reading react-create-app files.

---

config /webpack.config.dev.js

 'use strict'; const ExtractTextPlugin = require('extract-text-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const autoprefixer = require('autoprefixer'); const webpack = require('webpack'); const extractSass = new ExtractTextPlugin('style.css'); module.exports = { entry : './src/index.jsx', eslint: {configFile: './src/.eslintrc.json'}, module: { loaders: [ { exclude: /node_modules/, include: ['src'], loader: 'babel', test : /(\.js|\.jsx)$/ }, { exclude: /node_modules/, include: ['src'] loader : extractSass.extract([ 'css', 'postcss', 'sass' ]), test : /\.scss$/ } ], preLoaders: [ { exclude: /node_modules/, loader : 'eslint', query : {presets: [ 'react', 'latest' ]}, test : /(\.js|\.jsx)$/ } ] }, output: { filename : 'bundle.js', path : 'dist', publicPath: '/' }, plugins: [ extractSass, new HtmlWebpackPlugin({ inject : true, template: paths.appHtml }), new webpack.HotModuleReplacementPlugin({multistep: true}) ], postcss: () => [ autoprefixer({ browsers: [ '>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9' ] }) ] }; 

---

Scripts /dev.js

do $ yarn run dev

 'use strict'; const WebpackDevServer = require('webpack-dev-server'); const config = require('../config/webpack.config.dev.js'); const webpack = require('webpack'); const compiler = webpack(config); const server = new WebpackDevServer(compiler, { clientLogLevel : 'warn', compress : true, contentBase : 'public', filename : config.output.filename, historyApiFallback: true, hot : true, inline : true, lazy : false, noInfo : true, publicPath : '/', quiet : true, stats : 'errors-only', watchOptions : { aggregateTimeout: 300, poll : 1000 } }); server.listen(8080, 'localhost', () => { console.log('Listening on port 8080'); }); 

Answer 1

According to the webpack dev server documentation, you should add this entry point to your webpack configuration to support automatic updates.

 config.entry.unshift("webpack-dev-server/client?http://localhost:8080/"); 

Answer 2

jontem indicated in his answer that the webpack-dev-server client is missing in my configuration.

Here are the steps I took to apply his solution, as well as configure HMR.

config/webpack.config.dev.js

 module.config = { // ... entry: [ // converted entry to an array // to allow me to unshift the client later path.resolve(__dirname, '../src/index.jsx') ], // ... module: { loaders: { // ... { // Use style loader instead of ExtractTextPlugin // To allow for style injection / hot reloading css exclude: /node_modules/, loaders: [ 'style', 'css', 'postcss', 'sass' ], test : /\.scss$/ }, // ... } } } 

---

scripts/dev.js

 'use strict'; const WebpackDevServer = require('webpack-dev-server'); const config = require('../config/webpack.config.dev.js'); const webpack = require('webpack'); // unshift `webpack-dev-server` client // and hot dev-server config.entry.unshift('webpack-dev-server/client?/', 'webpack/hot/dev-server'); const compiler = webpack(config); // ... 

Answer 3

I had the same problem, and the following configuration included static and automatic reloading of packets in memory. The key should include devServer.watchContentBase .

config /webpack.config.dev.js

 ... module.exports = { ... devServer: { contentBase: ..., publicPath: ..., watchContentBase: true }, ... } 

package.json

 { ... "scripts": { "develop": "webpack-dev-server --open --mode development --config config/webpack.config.dev.js", ... } ... } 

Answer 4

Please add the following to your web package configuration and try.

 devServer: { hot: true, inline: true, host: "localhost", port: 8082, watchOptions: { poll: true } } 

note : I used webpack version ^ 3.11.0

Answer 5

I had a similar problem fixed by adding

  watchOptions: { poll: true } 

When I first installed the webpack starter, everything worked flawlessly, after a week of changes to webpack.config.js it stopped working. I fiddled with various recommendations, one of which worked, watchOptions: {poll: true}

For your information, I have webpack 4 with "webpack": "4.29.6", "webpack-cli": "^ 3.3.0", "webpack-dev-server": "3.3.1"

 devServer: { port: 3000, contentBase: './', watchOptions: { poll: true } }