生产环境配置
参考自 生产环境部署
首先,将 webpack.config.dev.js
复制一份,命名为 webpack.config.dev.js
使用 DefinePlugin 来指定生产环境
Vue 等库在代码级别也依赖了一些生产环境的标志。 可以通过 DefinePlugin
来处理。DefinePlugin
Vue 主要是依赖了 Node
的 process.env.NODE_ENV
,所以我们可以在 plugins
块中加入配置:
plugins:[
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify("production")
}),
]
值得注意的是,因为 DefinePlugin 实际上使用的是直接替换。我们你在是如下的过程:
// 替换前
if (process.env.NODE_ENV === "production") {
console.log('Debug info')
}
// 替换后
if("production" === "production"){
}
所以需要NODE_ENV
本身包含一个字符串。所以也可以将上面的 JSON.stringify("production")
改为 '"production"'
。
我们还可以指定其他的全局配置变量以供代码使用。
使用 UglifyJsPlugin 来压缩 JS 代码
官方文档: UglifyJsPlugin
- 安装
UglifyJsPlugin
,$npm i -D uglifyjs-webpack-plugin
- 导入模块
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
- 在
plugins
列表中注册:
plugins:[
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify("production")
}),
new UglifyJsPlugin({}),
]
更多选项,将参考上面官方文档。
不要将 Vue 库打包
将所依赖的库打包进一个 bundle.js 不方便利用 对应库提供的 CDN 的便利。所以这里介绍如果不将 Vue
库打包进bundle.js
的方式。
- 可以直接在
externals
配置块中添加声明,如下:
externals:{
vue: "Vue"
},
- 然后直接在
index.html
中添加对应资源的引用如下:
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.runtime.min.js"></script>
```html