1

My dev-server doesn't reload automatically after I change the contents of my files. Could you please help me understand, what do I need to change in my config?

Here's my code:

module.exports = {
    entry: {
        index: './src/index.pug',
    },
    output: {
        path: path.join(__dirname, 'dist/'),
    },
    devServer: {
        static: {
            directory: path.join(__dirname, 'dist/')
        },
        hot: true,
        open: true
    },
    module: {
        rules: [
            {
                test: /\.(s*)css$/,
                use: ['css-loader', 'sass-loader'],
            },
            {
                test: /.pug$/,
                loader: PugPlugin.loader, // Pug loader
            },
        ]
    },
    optimization: {
        minimizer: [
            `...`,
            new CssMinimizerPlugin(),
        ],
    },
    plugins: [
        new StylelintPlugin(),
        new PugPlugin({
            pretty: true,
            js: {
                filename: '[name].js',
            },
            css: {
                filename: '[name].css',
            },
        })
    ],
    mode: 'development',
    devtool: 'source-map',
}

I looked at what it says on the Console, and it says that it doesn't see any change???

Juliena
  • 11
  • 1

1 Answers1

0

Add to devServer watchFiles option:

module.exports = {
  // enable HMR with live reload
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    watchFiles: {
      paths: ['src/**/*.*'],
      options: {
        usePolling: true,
      },
    },
  },
};

Important:

Live reload works only if in the Pug template is defined at last one JS file. If your template don't contains a JS, then add one empty JS file: script(src=require('./hot-update.js')), Webpack self add the HMR code at compilation into empty JS file.

Please, see the documentation How to set up HMR (Live Reload)

biodiscus
  • 365
  • 3
  • 8