如何用webpack-merge配置不同环境HtmlWebpackPlugin模板及解决未定义报错

错误原因 #

• 第一个错误：webpack.dev.js和webpack.prod.js中直接使用了HtmlWebpackPlugin，但没有在文件头部引入该依赖，common配置中引入的依赖不会被其他配置文件共享，因此触发未定义报错。
• 第二个错误：webpack.prod.js的plugins字段缺少左中括号[，存在语法错误。
• 额外问题：当前配置下webpack-merge会把common中的HtmlWebpackPlugin实例和环境配置中的实例合并，最终会打包生成两个HTML文件，不符合预期。

修复方案 #

推荐将公共的HtmlWebpackPlugin配置拆分，不同环境单独完成实例化，避免重复生成文件：

1. 修改webpack.common.js，移除其中的HtmlWebpackPlugin实例：

const path = require('path');

module.exports = {
    entry: {
        app: './src/index.js',
    },
    plugins: []
};

2. 修改webpack.dev.js，引入HtmlWebpackPlugin并补全配置：

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

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

3. 修改webpack.prod.js，补全语法、引入依赖：

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

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

如果你不想修改common配置，也可以通过自定义webpack-merge的数组合并规则，单独覆盖HtmlWebpackPlugin的配置，避免生成多个HTML文件。

内容的提问来源于stack exchange，提问作者LinTao