vue-loader interfering with custom plugin

Question

To preprocess some custom non-HTML tags in a .vue file, I used to be (Webpack 3) able to install a loader via a plugin that would convert those custom tags into valid html/js code before the vue loader would see them and fail.

  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')
        });

      }
    }
  }

Now with Webpack 4 and the vue-loader (v15) this doesn't seem to work any more. The VueLoaderPlugin seems to modify the rules (using what they call "pitcher") which causes my custom loader still to be called, but the changed output (the substitution of the non-html tags) doesn't seem to be passed into the vue-loader (templateLoader.js) any more.

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

I haven't been able to investigate this any further than the above, so would appreciate any pointers anyone may have. In essence, I try to run my customer loader before vue-loader to alter the .vue files before the vue-loader gets to process them.

score 0 · Answer 1 · answered Dec 12 '19 at 02:34

I was able to resolve the problem by moving the custom loader into the *.vue rule:

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

instead of using:

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

which is the standard way of adding vue-loader.

vue-loader interfering with custom plugin

1 Answers1