Question

要预处理.vue文件中的某些自定义非HTML标记，我曾经（Webpack 3）能够通过插件安装加载程序，该插件会将这些自定义标记转换为有效的html / js代码， Vue加载程序会看到它们并失败。

  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似乎修改了规则（使用他们称为“ pitcher”的规则），这导致我的自定义加载程序仍然被调用，但是更改后的输出（非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的标准方法。

vue-loader干扰自定义插件

1 个答案: