Webpack之抽离压缩css

使用 mini-css-extract-plugin 插件的内置loader 替换 style-loader

使用 terser-webpack-plugin 插件压缩js代码

使用 optimize-css-assets-webpack-plugin 插件压缩css代码

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

const MiniCSSExtractPlugin = require('mini-css-extract-plugin');   const TerserPlugin = require('terser-webpack-plugin'); const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');   module.exports = {     // ...     module: {         rules: [             {                  test: /\.css/,                  loader: [                      MiniCSSExtractPlugin.loader, // 替换 style-loader                      'css-loader',                      'postcss-loader',  // autoprefixer                  ],             }         ]     },     plugins: [         new MiniCSSExtractPlugin({             filename: 'css/main.[contentHash:8].css'         })     ],     optimization: {         minimizer: {              // 压缩js              new TerserPlugin(),              // 压缩css              new OptimizeCssAssetsWebpackPlugin()         }     }   }