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

Question

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

我想使用不同的html模板在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',
})
]
});

报告ReferenceError: HtmlWebpackPlugin是没有定义当npm运行与这些配置

Answer 1

如果没有明确的require/import，你就不能直接从一个配置文件访问另一个配置文件中的HtmlWebpackPlugin。Merge只连接配置部分，而不是整个文件。

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

webpage-merge是不合并所有的文件数据只是模块。导出对象本身。