6.webpack 代码压缩
- Js压缩在webpack中默认内置了uglifyjs-webpack-plugin ,在打包的时候会自动压缩,不需要专门配置
- css压缩
- 使用 optimize-css-assets-webpack-plugin 插件和预处理器 cssnano
- npm i cssnano -D
- npm i optimize-css-assets-webpack-plugin -D
-
Html压缩
-
修改html-webpack-plugin ,设置压缩参数
-
安装 npm i html-webpack-plugin -D
-
每一个页面需要一个新的HtmlWebpackPlugin
plugins:[ new MiniCssExtractPlugin({ filename:'[name]_[contenthash:8].css' }), new OptimizeCssAssetsPlugin({ assetNameRegExp:/\.css$/g, cssProcessor:require('cssnano') }), new HtmlWebpackPlugin({ template:path.join(__dirname,"src/index.html"), filename:'index.html',//压缩完文件名 chunks:['s'], //引入js文件 inject:true, minify:{ html5:true, collapseWhitespace:true, preserveLineBreaks:false, minifyCSS:true, minifyJS:true, removeComments:false } }) ]
-
浪波激泥