vue-loader 干扰自定义插件答案

【问题标题】：vue-loader interfering with custom pluginvue-loader 干扰自定义插件
【发布时间】：2019-12-10 08:59:55
【问题描述】：

为了预处理 .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-loader 处理它们之前更改 .vue 文件。

【问题讨论】：

标签： javascript vue.js webpack-4 webpack-plugin webpack-loader

【解决方案1】：

我能够通过将自定义加载程序移至 *.vue 规则来解决问题：

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

而不是使用：

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

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

【讨论】：