webpack系统学习（七）CSS的代码分割和代码压缩

不了解代码分割的朋友可以先阅读笔者的这一篇文章，根据这篇文章我们知道，我们可以使用SplitChunksPlugin来对js代码进行代码分割，如果需要对网页的css文件进行代码分割，应该怎么做呢？

这时候我们可以使用MiniCssExtractPlugin，在webpack官网的相关说明中是这样描述MiniCssExtractPlugin：这个插件将CSS提取成单独的文件。它为每个包含CSS的JS文件创建一个CSS文件。它支持按需加载CSS和sourcemap。

安装：

npm install --save-dev mini-css-extract-plugin -D

由于该插件目前并不支持HMR（热模块更新，对HMR不了解的朋友可以查看笔者的这一篇博客），所以一般情况下，我们仅在上线时使用。
webpack.prod.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ],
  module: {
    rules: [
      {
        test: /\.(sc|sa|c)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2,
              modules: true
            }
          },
          'sass-loader',
          'postcss-loader'
        ]
      }
    ]
  }
}

index.css:

body{
  font-weight: 12;
}

index.js:

import '../style/index.css'

打包index.js：

main.css:

body{font-weight:12}

如果我们添加一个index1.sass，并在index.js中引入：
index1.sass：

body{
  background: aquamarine;
}

index.js:

import '../style/index1.scss'
import '../style/index.css'

现在我们再打包index.js:
我们发现打包后的main.css是这样的：

body{background:aquamarine}

body{font-weight:12}

如果需要进行代码压缩，我们可以使用optimize-css-assets-webpack-plugin。

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

这样生成的main.css就是压缩后的代码：

body{background:#7fffd4;font-weight:12}