中文
目录
第一篇:初始化项目
第二篇:代码规范
第三篇:Webpack 基本配置
第四篇:开发环境设置
第五篇:生产环境设置
第六篇:css、less、scss、图片支持
第七篇:IE11 兼容
第八篇:支持 React
第九篇:支持 Typescript>
第十篇:命令行工具
和开发环境不同，生产环境更注重性能上的提升，而不在乎编译的次数，因此需要满足以下内容：
压缩代码
分离代码，避免单个文件过大
移除 console.log 和注释
清理环境
之前多次修改代码并运行 build 命令的人会发现，dist 目录变得很乱，里面有多个 app.${hash}.js。
为此必须在 build 之前清理一下环境，这里使用 clean-webpack-plugin
安装：
npm install clean-webpack-plugin -D
打开 webpack.prod.js 文件，增加以下代码：
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
// others
plugins: [new CleanWebpackPlugin()],
}运行
npm run build
你会发现 dist 目录干净多了。
清理 console.log
我们在 index.js 里面加一段 console.log 代码和注释。
重新 build 之后看看生成的 app.${hash}.js，发现代码压缩了，注释也去掉了，但 console.log 留下了。
要去除 console.log 必须重定义内置压缩插件 terser-webpack-plugin
该插件需要重新安装一下。
npm install terser-webpack-plugin -D
打开 webpack.prod.js 文件，增加以下代码：
const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
// others
optimization: {
minimizer: [
new TerserPlugin({
extractComments: false,
terserOptions: {
compress: { pure_funcs: ['console.log'] },
},
}),
],
},
}extractComments：设为 false 就可以去除所有注释。
pure_funcs：可以设置我们想要去除的函数，比如上面是将代码中所有 console.log 去除。
重新 build 一下看看效果。
代码分片 SplitChunks
代码分片（code splitting）可以把代码按照特定的形式进行拆分。
说的简单点就是能把 import 的第三方包分离出来打成一个单独的文件。
打开 webpack.prod.js 文件，增加以下代码：
module.exports = {
// others
optimization: {
// others
splitChunks: {
chunks: 'all',
},
},
}chunks 的值为 all，这个配置项的含义是，SplitChunks 将会对所有的 chunks 生效。
这块设置我们可以在之后的IE兼容和React中看到效果。webpack 会打包出 2 个 js 文件，一个 lib ，一个 app 。
tree-shaking
这块 webpack 已经默认支持，因此不再赘述。
感兴趣的同学请在 index.js 中添加一个未被引用的函数，然后 build 以后看看输出的文件内容。
打包分析
打包好以后，我们想知道打出的包都有哪些，具体多大这时候就可以借助 webpack-bundle-analyzer
安装：
npm install webpack-bundle-analyzer -D
打开 webpack.prod.js 增加以下 plugin 即可：
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
module.exports = merge(common, {
// others
plugins: [
// others
new BundleAnalyzerPlugin()
],
// others
}再次运行 build，运行结束后会自动打开浏览器。
