这样拆分和压缩css代码

在【拆分】和【压缩】css代码之前，首先要配置 loader 处理不同的 css 资源，因为 webpack 没有默认可处理 css 资源的规则，具体可参考这一篇 webpack处理css/less资源

style-loader

loader 处理不同类型的 css 资源后通过 style-loader 将css代码添加到 html 文件中，但此时 css 代码并没有生成单独的文件，而是被编译到了 js 文件中。

1_css被编译到js文件中.png

所以在 html 页面中，css 代码是通过 style 标签创建的，而不是直接引入 css 资源地址。

2_style-loader.png

MiniCssExtractPlugin

当 css 文件较多时，全部打包至 js 文件，会使得 js 文件体积很大，将 css 代码抽离到单独的文件中能减少单个文件的加载压力。可通过 MiniCssExtractPlugin 实现。

安装 mini-css-extract-plugin, 定义 plugin，并用 MiniCssExtractPlugin.loader 替换 style-loader

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // 省略其余配置  
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'], // 省略其它loader
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: './css/[name].css',
      chunkFilename: './css/[name].css',
    }),
  ],
};

编译后的 css 将两个 css 文件代码合到了一起

3_miniCssExtractPlugin.png

css 资源被引入到 html 页面中

4_引入css资源.png

CssMinimizerWebpackPlugin

MiniCssExtractPlugin 只对 css 代码进行了拆分，压缩需要使用到 CssMinimizerWebpackPlugin。

安装 css-minimizer-webpack-plugin 后，在 optimization 属性中配置。

const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  // 其它配置省略
  optimization: {
    minimizer: [new CssMinimizerWebpackPlugin({})],
  },
};

可以看到压缩后css代码和源代码区别不大，这是因为如果修改选择器和属性名称，很难再与原来的元素对应，会需要增加复杂的处理映射关系的逻辑处理，所以对 css 的压缩主要是去除空格的操作。

5_压缩css代码.png

总结

• style-loader 用于创建 style 标签，将 css 代码添加到 html 页面中
• MiniCssExtractPlugin 会将处理好的 css 代码编译到新的 css 文件中，并在 html 文件中引入
• CssMinimizerWebpackPlugin 压缩 css 文件中的代码

以上就是拆分和压缩css代码的介绍， 更多有关 webpack 的内容可以参考我其它的博文，持续更新中~