vue.js Webpack问题:我无法使用configureWebpack将插件添加到vue.config.js
我用vue cli 3创建了一个vue.js项目。我遵循以下示例: https://cli.vuejs.org/guide/webpack.html
我的vue.config.js:
let webpack = require('webpack');
module.exports = {
configureWebpack: {
plugins: [
new webpack.DefinePlugin({
__TEST_MESSAGE__: JSON.stringify('howdy there!')
})
]
},
};
已解决的webpack配置如下:
{
mode: 'production',
...
plugins: [
/* config.plugin('vue-loader') */
new VueLoaderPlugin(),
/* config.plugin('define') */
new DefinePlugin(
{
'process.env': {
VUE_APP_CLI_UI_URL: '""',
NODE_ENV: '"production"',
BASE_URL: '"/"'
}
}
),
/* config.plugin('case-sensitive-paths') */
new CaseSensitivePathsPlugin(),
...
/////////////////////////////////////////////////////
// Inserted note for SO: This is messed up! Should
// be:
// new DefinePlugin({ __TEST_MESSAGE__: '"howdy there!"' })
/////////////////////////////////////////////////////
{
definitions: {
__TEST_MESSAGE__: '"howdy there!"'
}
}
],
...
}
configureWebPack应该将我的插件与vue定义的插件合并。为什么要剥离DefinePlugin类,而只在插件数组中包含构造函数的参数?
答案 0 :(得分:1)
由于Vue已经包含DefinePlugin
,因此您需要使用Webpack的链式API对其进行修改,而不是尝试添加新的。
module.exports = {
chainWebpack: config => {
config.plugin('define').tap(args => {
args[0].__TEST_MESSAGE__ = JSON.stringify('howdy there!')
return args
})
}
}
这将导致以下配置(仅作为示例)...
new DefinePlugin( { 'process.env': { NODE_ENV: '"development"', BASE_URL: '"/"' }, __TEST_MESSAGE__: '"howdy there!"' } ),
请参见https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-plugin