# 正文
诶？这么快就到生产环境了吗？我们的开发环境还没彻底完善呢，之前遗留的手动刷新页面才能看到最新效果的问题呢？
是的，的确有些地方还需要优化，但这个过程就像是““盖房子”。
当我们配置生产环境后，这个“毛坯房”就算是建造完成了，他已经能“用”，而剩下的那些优化和处理相当于是后期的“装修”，是为了让我们住的更舒服，体验更好。
“毛坯房”就像是骨架，骨架是基础，有了骨架后面的优化才有立足之地。
所以，我们本节一起来进行生产环境的配置、构建以及项目部署，让我们的“毛坯房竣工”。
# 生产环境都需要做哪些处理呢？
这里主要是对webpack进行相关配置，相信大家都玩过，那咱们就开门见山了。
- 对应的应该拥有一个独立的生产环境配置文件
- 设置环境变量，区分开发和生产环境
- 压缩
js css资源，体积更小，提高下载速度 js分包，基础库和业务代码分别打包，可以提高缓存利用率,提高页面渲染效率，节省用户流量- 为打包的
bundle名称配置hash值,这样有利于发布和资源缓存 - 生成资源映射表，用于服务端使用
- 有独立的发布命令
- 可以在本机运行生产环境
server，方便本地调试 - 开发环境做相应的调整
# 整体看资源的分布情况
先看下开发环境和生产环境的资源加载情况，然后下面再进行具体的实现。
通过上图可以比较清晰的看到生产环境和开发环境的差别。
下面来看具体实现
# 准备工作
安装所需 npm 包
npm i optimize-css-assets-webpack-plugin 压缩 css
npm i uglifyjs-webpack-plugin 压缩 js
npm i mini-css-extract-plugin 提取 css ，上一节已介绍过
npm i clean-webpack-plugin 打包前清理 dist 目录
@前端进阶之旅: 代码已经复制到剪贴板
# 前端生产环境构建配置
css js相关的 loader 配置和我们前面介绍的开发环境的一致，所以这里仅介绍有区别的地方。
首先我们创建生产环境配置文件./webpack/webpack.prod.config.js
# 配置环境变量
plugins: [
//...
new webpack.DefinePlugin({
'process.env': { NODE_ENV: '"production"'},//标识生产环境
'__IS_PROD__': true//方便在代码中使用
})
//...
]
@前端进阶之旅: 代码已经复制到剪贴板
# 配置文件 hash
方便文件的发布和充分利用资源的强缓存
//...
output: {
//设置 js
filename: 'js/[name].[chunkhash:8].js',
path: resolvePath('../dist/static'),
publicPath: '/'
}
//...
new MiniCssExtractPlugin({
//设置 css
filename:'css/[name].[contenthash:8].css'
})
//...
@前端进阶之旅: 代码已经复制到剪贴板
# 压缩 js css 文件
使其体积更小，提高下载速度
//压缩和优化 css
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
//压缩 js 代码
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
//...
optimization: {
minimizer: [
//压缩 js
new UglifyJsPlugin({
uglifyOptions: {
compress: {
drop_console: true,
drop_debugger: true
