Webpack MiniCssExtractPlugin

用于将css代码从打包结果中提取到单个文件中，通过这个插件，可以实现css代码的按需加载。

安装

yarn add mini-css-extract-plugin --dev

使用：

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
    ...,
  module: {
      rules: [
      {
          test: /\.css$/,
        use: [
                  // 使用MiniCssExtractPlugin.loader代替style-loader，通过link的方式将css引入
            MiniCssExtractPlugin.loader,
          "css-loader"
        ]
      }
    ]
  },
  plugins: [
      ...,
    new MiniCssExtractPlguin()
  ]
}

压缩css代码

通过MiniCssExtractPlugin插件打包的css代码并不能被压缩，webpack又提供了optimize-css-assets-webpack-plugin插件来压缩css代码。

安装：yarn add optimize-css-assets-webpack-plugin —dev