处理静态资源
js的打包基本处理完了,还有图片、音频等静态资源需要处理。
依然先装依赖:
1 | $ npm i -D url-loader file-loader |
增加webpack配置:
1 | // webpack.base.js |
tips: 生产环境需要合理使用缓存,需要拷贝一份同样的配置在
webpack.prod.js
中,并将name中的hash
改为contenthash
接下来我们要把public
目录里除了index.html
以外的文件都拷贝一份到打包目录中:
安装依赖:
1 | $ npm i -D copy-webpack-plugin |
增加配置:
1 | // webpack.base.js |
提取公共模块,拆分代码
有些模块是公共的,如果不把他拆分出来,那么他会在每一个被引入的模块中出现,我们需要优化与此相关的配置。
1 | // webpack.prod.js |
压缩代码(2019/9/18更新)
通过使用打包分析工具,我们会发现打出来的包都很大,远不能满足生产环境的体积要求,因此还需要对代码进行压缩。
安装依赖:
1 | $ npm i -D uglifyjs-webpack-plugin mini-css-extract-plugin compression-webpack-plugin |
增加和修改配置:
1 | // webpack.prod.js |
运行打包命令,查看打包好的文件,可以看到代码都被压缩好了。
使用terser
由于uglify-es
已经停止维护,所以改用目前比较流行的terser
来压缩js代码。我们仅需做几处简单的修改。
首先安装依赖:
1 | $ npm i -D terser-webpack-plugin |
然后改写webpack.prod.js
即可:
1 | // const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin'); |