How to set diffrent plugin options with webpack-merge

Question

base https://webpack.js.org/guides/production/

I want to use diffrent html template in webpack.dev.js & webpack.prod.js

webpack.common.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        app: './src/index.js',
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Production'
        }),
    ]
};

webpack.dev.js

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    mode: 'development',
    plugins: [
        new HtmlWebpackPlugin({
            template:'./public/index-dev.html',
        })
    ]
});

webpack.prod.js

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    mode: 'production',
    plugins: 
        new HtmlWebpackPlugin({
            template:'./public/index.html',
        })
    ]
});

report ReferenceError: HtmlWebpackPlugin is not defined when npm run with these config

Answer 1

With out an explicit require/import you cann't directly access HtmlWebpackPlugin or anything else from one config file in another. Merge only joins the config portion not the whole files.

Therefor you must have const HtmlWebpackPlugin = require('html-webpack-plugin'); in all files where HtmlWebpackPlugin is used.

webpage-merge is does not merge all file data just the module.exports object itself.