vue-cli3 的webpack配置
@vue/cli的webpack配置查看默认配置因为Vue CLI 内部的 webpack 配置是通过 webpack-chain 维护的, 把一些常用的内容配置好. vue-cli-service 暴露了 inspect 命令用于审查解析好的 webpack 配置。vue inspect > output.js将webpack默认配置, 重定向到一个文件中.其中的一段为:pl...
@vue/cli的webpack配置
查看默认配置
因为Vue CLI 内部的 webpack 配置是通过 webpack-chain 维护的, 把一些常用的内容配置好. vue-cli-service
暴露了 inspect
命令用于审查解析好的 webpack 配置。
vue inspect > output.js
将webpack默认配置, 重定向到一个文件中.
其中的一段为:
plugins: [
/* config.plugin('vue-loader') */
new VueLoaderPlugin(),
/* config.plugin('define') */
new DefinePlugin(
{
'process.env': {
NODE_ENV: '"development"',
BASE_URL: '"/"'
}
}
),
这里定义了
-
process.env.NODE_ENV
为development
-
process.env.BASE_URL
为/
自定义webpack
主要是按照官方文档的说明
调整 webpack 配置最简单的方式就是在 vue.config.js
中的 configureWebpack
选项提供一个对象:
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
new MyAwesomeWebpackPlugin()
]
}
}
该对象将会被 webpack-merge 合并入最终的 webpack 配置。
警告
有些 webpack 选项是基于
vue.config.js
中的值设置的,所以不能直接修改。例如你应该修改vue.config.js
中的outputDir
选项而不是修改output.path
;你应该修改vue.config.js
中的baseUrl
选项而不是修改output.publicPath
。这样做是因为vue.config.js
中的值会被用在配置里的多个地方,以确保所有的部分都能正常工作在一起。
如果你需要基于环境有条件地配置行为,或者想要直接修改配置,那就换成一个函数 (该函数会在环境变量被设置之后懒执行)。该方法的第一个参数会收到已经解析好的配置。在函数内,你可以直接修改配置,或者返回一个将会被合并的对象:
// vue.config.js
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
} else {
// 为开发环境修改配置...
}
}
}
更多推荐
所有评论(0)