Webpack通过MiniCssExtractPlugin为每个导入CSS生成独立CSS文件

不需要额外引入新插件，用你已经安装的MiniCssExtractPlugin、HtmlWebpackPlugin搭配Webpack原生的分包能力就能实现需求，拆分后的CSS会自动插入到HTML中。

现有配置的不足 #

你当前的配置默认会把index入口引入的所有CSS资源（本地scss、第三方animate.css）合并到同一个index.css文件里，没有定义单独的CSS分包规则，所以不会输出独立的animate.css。

具体修改方法 #

直接在你的webpack-config.js中新增optimization配置项，通过splitChunks缓存组分别定义两类CSS的拆分规则即可：

// 把这段配置加到module.exports的根层级，和entry、output、plugins这些字段平级
optimization: {
  splitChunks: {
    cacheGroups: {
      // 拆分第三方animate.css为独立文件
      animate: {
        name: 'animate',
        test: /[\\/]node_modules[\\/]animate.css[\\/]/,
        type: 'css/mini-extract',
        chunks: 'all',
        enforce: true,
      },
      // 本地样式归为index.css
      localStyles: {
        name: 'index',
        test: /[\\/]src[\\/](css|assets[\\/]css)[\\/]/, // 匹配你本地存放scss/css的路径
        type: 'css/mini-extract',
        chunks: 'all',
        enforce: true,
      }
    }
  }
},

其他配置不需要改动：

• 你现有的MiniCssExtractPlugin的filename配置assets/css/[name].css会自动生效，最终输出路径为dist/assets/css/index.css和dist/assets/css/animate.css
• HtmlWebpackPlugin默认会把入口关联的所有初始资源（包括拆分出来的CSS）自动以<link>标签形式注入HTML的head区域，不需要手动修改模板添加引用。

避坑提示 #

• 两个缓存组规则必须加type: 'css/mini-extract'，这是MiniCssExtractPlugin识别CSS分包的专属标识，缺了这个字段只会拆分JS，CSS依然会被合并。
• 加enforce: true是为了跳过Webpack默认的分包大小、引用次数校验，强制按你写的规则拆分，避免因为资源体积太小被Webpack自动合并。
• 本地样式的test正则要和你项目实际的样式存放路径匹配，如果你的样式文件路径和示例不一致，自行调整正则即可。
• 打包后CSS的注入顺序和你在JS入口的import顺序一致：animate.css在前，本地样式在后，不会出现样式优先级错乱的问题。

内容的提问来源于stack exchange，提问作者asaks-