时间戳

首页 > 解决方案 > 如何使用 webpack-merge 设置不同的插件选项

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

问题描述

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

我想在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 is not defined when npm run with these config

标签： javascriptwebpack

解决方案

如果没有明确的要求/导入，您将无法从另一个配置文件中直接访问 HtmlWebpackPlugin 的任何其他内容。合并只加入配置部分而不是整个文件。

因此，您必须const HtmlWebpackPlugin = require('html-webpack-plugin');在所有使用 HtmlWebpackPlugin 的文件中都有。

网页合并不会仅合并 module.exports 对象本身的所有文件数据。

推荐阅读