1. 使用 optimize-css-assets-webpack-plugin 外掛和前處理器 cssnano
2. npm i cssnano -D
3. npm i optimize-css-assets-webpack-plugin -D

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
               }
           })
       ]