Webpack-dev-server不会在更改时构建文件

Question

So I have the following webpack configuration :

import path from 'path';

module.exports = {
    entry: {
    index: './dev/index.js'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        publicPath: './dist/',
        filename: 'bundle.js',
        chunkFilename: '[id].bundle.js'
    },
    module:{
        loader:{
            test: /\.js$/,
            exclude:path.resolve(__dirname, "node_modules"),
            loader: 'js'
        }
    }

};

The problem is that when I do webpack --watch the file does build in the /dist/ folder at every change. Yet when I run the webpack-dev-server the files don't even build. Why is that?

Please help.

Answer 1

The reason you are not seeing files emitted into your dist folder is because webpack-dev-server uses an in-memory filesystem

This allows for extremely fast incremental builds when your code changes. This was an intentional design on our part. You can view the resulting code in your browser and never need to reference those files.

It is not recommended by us, for the sake of build performance, but you can look in to plugins like write-file-webpack-plugin if you need this feature.

Answer 2

'webpack' writes your bundle to disk, whereas 'webpack-dev-server' loads the bundle into memory. So when running the latter command you wont see a new 'bundle.js' file appear in your file system, even though you should see output to the console reporting the bundling and the start up of the dev server).

The output.publicPath config key determines the location of the in-memory bundle on the host dev server. So if you set the publicPath to 'dist' then the index.html served by the webpack dev server will need a script tag in order to reference the bundle.