6.webpack 代码压缩

 

1. Js压缩在webpack中默认内置了uglifyjs-webpack-plugin ，在打包的时候会自动压缩，不需要专门配置
2. css压缩
   1. 使用 optimize-css-assets-webpack-plugin 插件和预处理器 cssnano
   2. npm i cssnano -D
   3. npm i optimize-css-assets-webpack-plugin -D
   4. 

3.  Html压缩 

   1. 修改html-webpack-plugin ,设置压缩参数

   2. 安装 npm i html-webpack-plugin -D

   3.  每一个页面需要一个新的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
                  }
              })
          ]