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

style-loader

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

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

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 文件代码合到了一起

css 资源被引入到 html 页面中

CssMinimizerWebpackPlugin

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

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

const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin');module.exports = {  // 其它配置省略  optimization: {    minimizer: [new CssMinimizerWebpackPlugin({})],  },};

能够看到压缩后css代码和源代码区别不大，这是因为如果批改选择器和属性名称，很难再与原来的元素对应，会须要减少简单的解决映射关系的逻辑解决，所以对 css 的压缩次要是去除空格的操作。

总结

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

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