如何阻止Webpack在Vue单文件修改时触发多次编译？

我能理解你遇到的这个循环编译的困扰——这种依赖触发的无限循环确实很头疼。咱们先拆解一下问题的根源，再看看怎么用oneOf和规则调整来解决它。

问题根源 #

你当前的Webpack配置里有两条独立的针对.vue文件的规则，这意味着每个.vue文件会被vue-loader和webpack-atomizer-loader分别处理一次。当你修改Main.vue时：

1. webpack-atomizer-loader重新生成main.css；
2. 因为Main.vue里导入了main.css，Webpack会判定Main.vue的依赖发生了变化，于是重新编译Main.vue；
3. 重新编译又会触发webpack-atomizer-loader再次生成main.css，循环就此形成。

解决方案：用oneOf调整规则结构 #

oneOf的核心作用是让Webpack对每个模块只匹配第一个符合条件的规则，我们可以利用这一点来避免.vue文件被重复处理，同时优化loader的执行逻辑。

修改后的Webpack配置 #

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        oneOf: [
          {
            // 让每个.vue文件只经过这一条规则的处理链
            use: [
              'vue-loader',
              {
                loader: 'webpack-atomizer-loader',
                options: {
                  // 这里可以配置atomizer的参数，比如输出文件名等
                  filename: 'main.css'
                }
              }
            ]
          }
        ]
      },
      {
        // 处理除了生成的main.css之外的其他css文件
        test: /\.css$/,
        exclude: /main.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        // 单独处理生成的main.css，确保加载逻辑正确
        test: /main.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    // 不要忘记引入vue-loader的配套插件
    require('vue-loader/lib/plugin')()
  ]
};

更彻底的循环打破方法 #

另外，我强烈建议你把main.css的导入从Main.vue移到项目的入口文件（比如main.ts）中。这样做的好处是：

• 当Main.vue修改触发main.css更新时，Webpack只会重新编译入口文件，而不会再次触发Main.vue的编译；
• 从根源上切断了Main.vue和它生成的main.css之间的直接依赖循环。

为什么oneOf能解决问题？ #

之前的配置中，两条独立的.vue规则会让Webpack对同一个文件执行两次完整的处理流程，这不仅冗余，还为循环触发埋下了隐患。用oneOf包裹后，每个.vue文件只会匹配到一条规则，执行一次loader链，避免了重复处理带来的额外编译触发。

内容的提问来源于stack exchange，提问作者Kushagra Gour