如何使用 webpack-merge 设置不同的插件选项

Question

基础https://webpack.js.org/guides/product/

我想在 webpack.dev.js 和 webpack.prod.js

中使用不同的 html 模板

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',
        })
    ]
});

报告ReferenceError：HtmlWebpackPlugin未定义当npm run使用这些配置

Answer 1

如果没有显式的 require/import，您将无法直接从一个配置文件访问另一个配置文件中的 HtmlWebpackPlugin 或其他任何内容。合并仅加入配置部分而不是整个文件。

因此，使用 HtmlWebpackPlugin 的所有文件中都必须有

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

。

webpage-merge 不会合并所有文件数据，仅合并 module.exports 对象本身。