阻止webpack在单个文件更改时多次编译

Question

我正在使用带有Typescript的Vue.js单文件组件。对于CSS，有一个webpack加载器可以从.vue个文件生成CSS样式表文件。

rules: [
  {
    test: /\.vue$/,
    use: [
      {
        loader: 'vue-loader'
      }
    ]
  },
  {
     test: /\.vue$/,
     use: [
       {
          loader: 'webpack-atomizer-loader'
       }
     ]
  },
  {
     test: /\.css?$/,
     use: [ 'style-loader', 'css-loader' ]
  }
]

webpack-atomizer-loader生成main.css，我在Main.vue文件中导入import './main.css'。

现在，当我更改任何内容Main.vue时，它会触发生成新webpack-atomizer-loader的{​​{1}}。但由于main.css是main.css的依赖关系，因此webpack认为Main.vue已更改并再次运行Main.vue导致循环。

webpack-atomizer-loader似乎可以用于我的情况，但我真的不明白如何。有什么指针吗？