Webpack 4 | pug files doesn't compile automatically

Question

I am working on a project in which I am using Pugjs as a template engine. and webpack 4 as a bundler.

when I change anything in the .pug files I have to re-run the compiler manually.

any help on how I can set it so the compiler run once I edit the files ?.

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');


module.exports = {
entry: {
    main: './src/index.js'
},
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
},
module: {
    rules: [
        {
            test: /\.scss$/,
            use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
        },
        {
            test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
            exclude: [/images/],
            use: [{
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: './assets/fonts/'
                }
            }]
        },
        {
            test: /\.(png|svg|jpg|gif)$/,
            exclude: [/fonts/],
            use: {
                loader: 'file-loader',
                options: {
                    outputPath: './assets/images/',
                    name: '[name].[ext]',
                }
            }
        },
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader"
            }
        },
        {
            test: /\.pug$/,
            use: ['html-loader?interpolate', 'pug-html-loader']
        }
    ]
},
plugins: [
    new CleanWebpackPlugin('dist', {}),
    new MiniCssExtractPlugin({
        filename: 'style.[contenthash].css',
    }),

    new HtmlWebpackPlugin({
        // inject: false,
        hash: true,
        template: './src/index.pug',
        filename: 'index.html',
        title:'home'
    }),
    new HtmlWebpackPlugin({
        filename: 'contact.html',
        hash: true,
        template: './src/contact.pug',
        // inject: false,
        title: 'contact'
    }),
    new WebpackMd5Hash()
 ]
};

update 1 it works fine when I use webpack command but it doesn't create the dev server for sue but when I use webpack-dev-server it create the server but dist folder didn't created without errors in the terminal!

Answer 1

You have 2 options to do that:

1. Using Webpack's Watch Mode
2. Using webpack-dev-server

Webpack Watch Mode Just run webpack with --watch argument

webpack --watch

With the above command, webpack will watch your files and with any changes, will recompile your code. This is the easiest way.

webpack-dev-server The webpack-dev-server provides you with a simple web server and reload your browser every time you make any changes to your file.

Install webpack-dev-server:

npm install --save-dev webpack-dev-server

Also add devServer your webpack.config.js file:

module.exports = {
    devServer: {
        contentBase: './dist'
    }
}

Now run it with webpack-dev-server. You can visit your webpage on localhost:8080 and any changes to your file will also recompile your bundles and reload your browser.

Note that you might need to run the above command with npx:

npx webpack --watch

and

npx webpack-dev-server

Update 1 webpack-dev-server doesn't make any files on the hard-disk—It only create files in the memory for faster processing. Otherwise, the results are the same.