Webpack学习系列(三)代码压缩及dist文件夹清理

244 阅读1分钟

通过压缩减小文件体积,优化加载速度

js压缩

1. npm i uglifyjs-webpack-plugin -D

2. 添加plugin并设置选项:www.webpackjs.com/plugins/ugl…


CSS的压缩:

1. npm i optimize-css-assets-webpack-plugin -D

2. npm i cssnano -D


html文件的压缩

1. npm i html-webpack-plugin -D

2. 设置压缩参数



文件清理插件

1. npm i clean-webpack-plugin -D

2. const {cleanWebpackPlugin} = require('clean-webpack-plugin') 

3. new cleanWebpackPlugin()

4. 如果还是不行就先手动删掉整个dist文件夹

5. 一个小问题:绿色注释部分为原来的配置,在安装了清理插件,并反复调用npm run build的时候会出现报错,只要用新的loader配置就可以解决。

报错图片:

解决方法: