在【拆分】和【压缩】css代码之前，必须先配置loader来处理不同的css资源，因为webpack没有默认处理css资源的规则。具体可以参考这篇文章webpack处理css/less资源style-loaderloader处理不同类型的css资源，通过style-loader将css代码添加到html文件中，但是此时css代码并不是生成为单独的文件，而是编译放到js文件中。所以在html页面中，css代码是通过style标签创建的，而不是直接引入css资源地址。当MiniCssExtractPlugin中的css文件较多时，全部打包成js文件，会导致js文件非常大。将css代码提取到单独的文件中，可以减轻单个文件的加载压力。可以通过MiniCssExtractPlugin来实现。安装mini-css-extract-plugin，定义插件，将style-loader替换为MiniCssExtractPlugin.loaderconstMiniCssExtractPlugin=require('mini-css-extract-plugin');module.exports={//省略配置模块的其余部分:{rules:[{test:/\.css$/,use:[MiniCssExtractPlugin.loader,'css-loader'],//省略其他加载器},],},plugins:[newMiniCssExtractPlugin({filename:'./css/[名称].css',chunkFilename:'./css/[名称].css',}),],};编译后的css将两个css文件的代码合并在一起，在html页面中引入css资源CssMinimizerWebpackPluginMiniCssExtractPlugin只拆分了css代码，压缩需要用到CssMinimizerWebpackPlugin。安装css-minimizer-webpack-plugin后，在optimization属性中进行配置。constCssMinimizerWebpackPlugin=require('css-minimizer-webpack-plugin');module.exports={//其他配置省略optimization:{minimizer:[newCssMinimizerWebpackPlugin({})],},};可以看到压缩后的css代码和源码没有太大区别。这是因为如果修改了选择器和属性名，将很难对应到原来的元素，需要增加复杂的逻辑处理来处理映射关系。所以css的压缩主要是去掉空格。操作。总结style-loader用于创建样式标签和将css代码添加到html页面中。MiniCssExtractPlugin会将处理后的css代码编译成新的css文件，并在html文件中引入CssMinimizerWebpackPlugin来压缩css文件中的代码。以上就是拆解压缩css代码的介绍，更多关于webpack的内容可以参考我的其他博文，持续更新中~
