在vuejs
中更改默认Webpack配置时遇到问题。
我想替换指定文件(src/config.js
中的一些占位符
但是很难使用string-replace-webpack-plugin
来应用webpack-chain
,这是我修改vue-cli导出的webpack配置的唯一方法。任何帮助都会很棒。
1。配置
const StringReplacePlugin = require('string-replace-webpack-plugin')
config.module
.rule('preReplace')
.test(/src\/config\.js$/)
.pre()
.use('replace')
.loader(StringReplacePlugin.replace)
.options({
replacements: [{
pattern: /__IS_DEV__/g,
replacement: function () {
return process.env.NODE_ENV === 'development'
}
},
{
pattern: /__IS_APP__/g,
replacement: function () {
return process.env.IS_APP || false
}
},
{
pattern: /__API_HOST__/g,
replacement: function () {
return process.env.API_HOST || ''
}
}
]
})
config.plugin('strReplace').use(StringReplacePlugin)
2。我期望的是
{
module: {
rule: [
/* config.module.rule('preReplace') */
{
test: /src\/config\.js$/,
enforce: 'pre',
use: [
/* config.module.rule('preReplace').use('replace') */
{
loader: StringReplacePlugin.replace({
replacements: [{
pattern: /__IS_DEV__/g,
replacement: function () {
return process.env.NODE_ENV === 'development'
}
},
{
pattern: /__IS_APP__/g,
replacement: function () {
return process.env.IS_APP || false
}
},
{
pattern: /__API_HOST__/g,
replacement: function () {
return process.env.API_HOST || ''
}
}
]
})
}
]
}
]
},
plugins: [
/* config.plugin('strReplace') */
new StringReplacePlugin()
]
}
3。我实际上得到了什么
{
module: {
rule: [
/* config.module.rule('preReplace') */
{
test: /src\/config\.js$/,
enforce: 'pre',
use: [
/* config.module.rule('preReplace').use('replace') */
{
loader: function StringReplacePlugin() {},
options: {
replacements: [{
pattern: /__IS_DEV__/g,
replacement: function () {
return process.env.NODE_ENV === 'development'
}
},
{
pattern: /__IS_APP__/g,
replacement: function () {
return process.env.IS_APP || false
}
},
{
pattern: /__API_HOST__/g,
replacement: function () {
return process.env.API_HOST || ''
}
}
]
}
}
]
}
]
},
plugins: [
/* config.plugin('strReplace') */
new StringReplacePlugin()
]
}