1. 程式人生 > >webpack4--提取css到單獨檔案並且壓縮css

webpack4--提取css到單獨檔案並且壓縮css

提取css到build/css目錄下:mini-css-extract-plugin外掛
壓縮css:optimize-css-assets-webpack-plugin’外掛

Uglify是壓縮js:new Uglify(), webpack4已經不需要了,
“scripts”: {
“build”: “webpack --mode production”
}
production模式下js會自動壓縮

const MiniCssExtractPlugin = require("mini-css-extract-plugin");//提取css到單獨檔案的外掛
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');//壓縮css外掛
 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,//注意這邊
          "css-loader"
        ]
      }
    ]
  }
   plugins: [
      new MiniCssExtractPlugin({
            filename: "css/[name].css",////都提到build目錄下的css目錄中
            chunkFilename: "[id].css"
        }),
        new OptimizeCssAssetsPlugin()
   ]

提取壓縮結果

在這裡插入圖片描述