vue-loader干扰自定义插件

Question

为了在.vue文件中预处理一些自定义的非html标签，我曾经(Webpack 3)能够通过一个插件安装一个加载器，该插件可以在vue加载器看到它们并失败之前将这些自定义标签转换为有效的html/js代码。

  apply(compiler) {

    compiler.plugin('normal-module-factory', normalModuleFactory => {

      normalModuleFactory.plugin('after-resolve', (data, callback) => {
        let filename = data.resource;
        // check filename
        data.loaders.push({
          loader: path.resolve('./my-custom-loader')
        });

      }
    }
  }

现在，对于Webpack 4和vue-loader (v15)，这似乎不再起作用。VueLoaderPlugin似乎修改了规则(使用他们所谓的“投手”)，这导致我的自定义加载器仍然被调用，但更改后的输出(非html标记的替换)似乎不再传递到vue-loader (templateLoader.js)中。

class VueLoaderPlugin {
  apply (compiler) {
    ...
    // replace original rules
    compiler.options.module.rules = [
      pitcher,
      ...clonedRules,
      ...rules
    ]

除了上面的内容，我不能对此进行更深入的研究，所以如果任何人有任何建议，我都将不胜感激。本质上，我尝试在vue-loader之前运行我的客户加载器，以便在vue加载器处理.vue文件之前修改它们。

Answer 1

我能够通过将自定义加载器移动到*.vue规则中来解决这个问题：

      {
        test: /\.vue$/,
        use: [
          'vue-loader',
          {loader: myCustomLoader}
        ]
      },

而不是使用：

      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },

这是添加vue-loader的标准方法。