webpack-dev-server --watch doesn't work

Question

I am using webpack to manage my web application and using webpack-dev-server for development web server. I know that webpack dev server has a --watch switch to watch the content of source code change. But when I run webpack-dev-server --watch command and then change the source code, it doesn't reload the source code. I have to shutdown the server then run webpack command to re-bundle my target file. Below is my webpack-config.js file which has watch: true configuration. I don't understand why webpack-dev-server can't watch the source code changes.

module.exports = {
entry: {
    app: PATHS.app
},
output: {
    path: PATHS.build,
    filename: 'app.bundle.js',
},
watch: true,

resolve: {
  extensions: ['', '.js', '.jsx','.css'],
  modulesDirectories: ['node_modules'],
  alias: {
    leaflet_css: __dirname + '/node_modules/leaflet/dist/leaflet.css',
    normalize_css: __dirname + '/node_modules/normalize.css/normalize.css',
    main_css: __dirname + '/src/style/main.css'
  }
},
module: {
    // preLoaders: [
    //   {
    //     test: /\.js$/, 
    //     loader: "source-map-loader"
    //   }
    // ],
    loaders: [
    {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader?presets=es2015'
    },
    { test: /\.css$/, loader: 'style-loader!css-loader' },
    { test: /\.png$/, loader: "url-loader?limit=100000" },
    { test: /\.jpg$/, loader: "file-loader" },
    {
        test: /\.js$/, 
        exclude: /node_modules/,                
        loaders: ['babel-loader?presets=es2015']
    }
    ]
},
plugins: [
    new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false,
        },
        output: {
            comments: false,
        },
    }),
    new NpmInstallPlugin({
        save: true // --save
      })
],
devServer: {
    colors: true,
    contentBase: __dirname,
    historyApiFallback: true,
    hot: true,
    inline: true,
    port: 8081,
    progress: true,
    stats: {
      cached: false
    }
  }

leaflet_css is an alias defined in webpack-config.js. I just use import to import them into my application. — Zhao Yi
Try to: import style from 'leaflet_css'; Is there anything in style variable? — Artem Markov
After some debug, I found that this because webpack-dev-server doesn't reload when source code changes. I revised the post for this question. — Zhao Yi
What platform? What kind of directories? At least on Windows Webpack seems to be sensitive for special characters on the path (for example parenthesis and spaces). For example the watch did not work under my Dropbox directory, but worked when I moved the files to c:\temp. Symlinking does not solve this, as Webpack resolves the actual path and uses that instead of symlink. — Juha Palomäki

nethsix nethsix · Accepted Answer · 2018-05-07T14:17:03

It sounds like your html file <script> tag is pointing to the bundle served out of your contentBase directory (see your webpack configuration file). webpack-dev-server never monitors contentBase for changes by default, so no live-reloading ever happens. You have to reload manually your server or clear your browser cache, and refresh your browser. Neither of it should be required if webpack-dev-server is configured correctly.

Point your html file <script> tag to the bundle served out of publicPath instead.

The main thing to remember is webpack-dev-server never creates an actual bundle file in your filesystem, it is created and served from memory.

This article comprehensively describes the most common symptoms of webpack-dev-server not live-reloading (https://medium.com/code-oil/burning-questions-with-answers-to-why-webpack-dev-server-live-reload-does-not-work-6d6390277920)

webpack-dev-server --watch doesn't work

1 Answers