webpack-dev-server does not reload and build automatically - configuration issue

Question

I am using in my project:

"webpack": "2.2.1",
"webpack-dev-server": "2.4.2"

and I need to build an application when a file change using webpack-dev-server live reloading.

In my package.json I have this setup:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --hot --inline"
},

Currently I am able to build the application manually by running: webpack and I am able to initialize the developer server using npm start .

The problem I am facing is that after npm start and local server runs, if I make some changes in JS files the application is NOT being rebuilded and page is not refreshed automatically. Currently I need to rerun webpack manually all the time in console.

I receive no errors in console, so I suppose is a wrong configuration issue.

Could you please point me out what is wrong in my settings?

---

// file: webpack.config.js
const path = require('path');
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'app.bundle.js',
    },
    devServer: {
        inline: true,
        port: 8080
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            }
        ]
    }
};

Answer 1

webpack-dev-server serves the files from memory.

From readme :

It uses webpack-dev-middleware under the hood, which provides fast in-memory access to the webpack assets.

So it does not write any file to disk and it also works without the files being present on your file system. When you delete the build directory and start the dev server without running webpack before, it should still work. If it doesn't, you don't hit the paths that are served from the dev server and instead are using the files from the file system.

The index.html you're using is probably outside the build directory and therefore you include the bundle like this:

<script src="build/app.bundle.js"></script>

You're requesting /build/app.bundle.js on the server, but webpack-dev-server will only serve /app.bundle.js (because that's the filename you configured). To solve this issue you can configure output.publicPath :

output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'app.bundle.js',
    publicPath: '/build/'
},

This will affect loaders that include assets. If you don't want that, you can set devServer.publicPath instead, but it's recommended to keep them the same.