0

为了预处理文件中的一些自定义非 HTML 标签.vue，我曾经（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“投手”），这导致我的自定义加载器仍然被调用，但更改后的输出（非 html 标记的替换）似乎没有传递到 vue- loader ( templateLoader.js) 了。

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

除了上述之外，我无法对此进行任何进一步的调查，因此希望任何人都可以提供任何指示。本质上，我尝试在 vue-loader 开始处理文件之前运行我的客户加载器vue-loader来更改文件。.vue

4

1 回答 1

0

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

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

而不是使用：

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

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

于 2019-12-12T02:34:01.780 回答