webpack-css-plugin配置以及css的壓縮

Q：都配置了css-loader，爲什麼還要配置css的plugin？
在使用css-loader的時候，打包之後css是被style-loader直接插入到head標籤裏面，並沒有css單獨的文件生成，使用css-plugin的目的是生成單獨的css文件並自動將css文件引入

1.安裝

https://webpack.js.org/plugins/mini-css-extract-plugin/

2.配置

//webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: 'css/[name].css',//打包後放到css目錄下，名字與打包之前一樣
      //chunkFilename: '[id].css',
    }),
  ]

修改css-loader的配置

//原來的配置
            {
                test: /\.css$/,
                /*
                css-loader:解析css文件中的@import依賴關係
                style-loader：將webpack處理之後的css內容插入到HTML的HEAD標籤裏
                postcss-loader:放在最後面，最早執行
                 */
                // use: [ 'style-loader', 'css-loader','postcss-loader' ]
                use:[
                    {
                        loader:"style-loader"//自動的將css插入到head標籤中
                    },
                    {
                        loader:'css-loader',
                        options:{
                            // modules:true  //開啓css-loader模塊化
                        }
                    },
                    {
                        loader:'postcss-loader'
                    }
                ]
            },

修改後的配置

            {
                test: /\.css$/,
                /*
                css-loader:解析css文件中的@import依賴關係
                style-loader：將webpack處理之後的css內容插入到HTML的HEAD標籤裏
                postcss-loader:放在最後面，最早執行
                 */
                // use: [ 'style-loader', 'css-loader','postcss-loader' ]
                use:[
                    {
                        loader:MiniCssExtractPlugin.loader
                    },
                    {
                        loader:'css-loader',
                        options:{
                            // modules:true  //開啓css-loader模塊化
                        }
                    },
                    {
                        loader:'postcss-loader'
                    }
                ]
            },

3.如何壓縮css代碼呢？

3.1安裝壓縮css代碼的插件

npm install --save-dev optimize-css-assets-webpack-plugin

3.2配置

//webpack.config.js
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
/*
optimization:配置webpack的優化項目
*/
	optimization: {
	    minimizer: [new OptimizeCSSAssetsPlugin({})],
	  },
}

配置完成再進行打包，css文件就已經被壓縮了，但是有一個問題，我們先來看js代碼的壓縮
當配置文件裏面的mode：production的時候js代碼會被壓縮
但是當配置了壓縮css代碼的插件時，會覆蓋掉webpack的配置，js代碼不會進行壓縮
那麼必須安裝其他插件來進行js代碼的壓縮

4.當js壓縮的配置被覆蓋時，如何壓縮js代碼

4.1 安裝壓縮js代碼的插件

npm install --save-dev terser-webpack-plugin

4.2配置

//webpack.config.js
const TerserJSPlugin = require('terser-webpack-plugin');

module.exports = {
/*
optimization:配置webpack的優化項目
*/
	optimization: {
	    minimizer: [new TerserJSPlugin ({})],
	  },
}

可以壓縮css代碼和js代碼的完整版配置

//webpack.config.js
const TerserJSPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');


module.exports = {
  optimization: {
    minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      //chunkFilename: '[id].css',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
};

最後來看一下npm官方的說法