CODEWITHSUNDEEP
javascriptwebpackwebpack-dev-serverwebpack-style-loader
Mark Spencer
Mark Spencer

Reputation: 81

Webpack-dev-server doesn't build files on change

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 --watchthe 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.

Upvotes: 1

Views: 1741

Answers (2)

Sean Larkin
Sean Larkin

Reputation: 6420

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.

Upvotes: 5

Puckey
Puckey

Reputation: 31

'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.

Upvotes: 0

Related Questions