vue.config.js & webpack 4: override 'exclude' or 'include' of rule

Question

I want to override the exclude / include of a webpack rule. The project has been created with vue-cli-sevice and therefore only has a vue.config.js. I am able to hook into the configuration with chainWebpack, but I'm not able to edit the rule itself.

The output of vue-cli-service inspect contains the rule I want to edit:

      /* config.module.rule('js') */
      {
        test: /\.jsx?$/,
        exclude: [
          function () { /* omitted long function */ }
        ],
        use: [
          {
            loader: 'cache-loader',
            options: {
              cacheDirectory: '/Users/m/projects/echo/.../.cache/babel-loader',
              cacheIdentifier: '4b5cee3d'
            }
          },
          {
            loader: 'babel-loader'
          }
        ]
      },

I now want to edit this configuration from my vue.config.js (the commented out part shows how I found it in the documentation but it's not working):

const chainWebpack = (config) => {
    config.module.rule('js');
        // .include
        // .add('node-modules/blubb')
        // .end();
};

module.exports = {
    chainWebpack
};

How can I add an include or override the exclude property of this rule configuration?

Answer 1

I got it working like so. This clears the whole exclude and adds an include.

const chainWebpack = (config) => {
    config.module
        .rule('js')
        .test(/\.jsx?$/)
            .exclude
                .clear()
            .end()
            .include
                .add(function() {
                    return [
                        'node_modules/include-me',
                        'src'
                    ]
                })
            .end()
};

The easiest way to check if everything works as expected is IMO to run vue-cli-service inspect. Change the config, check if inspect fails and, if it doesn't, check if the output contains the desired changes.

Answer 2

 /* config.module.rule('js') */
  {
    test: /\.m?jsx?$/,
    exclude: [
      filepath => {
                  // always transpile js in vue files
                  if (/\.vue\.jsx?$/.test(filepath)) {
                    return false
                  }
                  // exclude dynamic entries from cli-service
                  if (filepath.startsWith(cliServicePath)) {
                    return true
                  }
      
                  // only include @babel/runtime when the @vue/babel-preset-app preset is used
                  if (
                    process.env.VUE_CLI_TRANSPILE_BABEL_RUNTIME &&
                    filepath.includes(path.join('@babel', 'runtime'))
                  ) {
                    return false
                  }
      
                  // check if this is something the user explicitly wants to transpile
                  if (transpileDepRegex && transpileDepRegex.test(filepath)) {
                    return false
                  }
                  // Don't transpile node_modules
                  return /node_modules/.test(filepath)
                }
    ],
    use: [
      {
        loader: '/Users/penglz/codeLab/mantis/node_modules/cache-loader/dist/cjs.js',
        options: {
          cacheDirectory: '/Users/penglz/codeLab/mantis/node_modules/.cache/babel-loader',
          cacheIdentifier: '12a9bd26'
        }
      },
      {
        loader: '/Users/penglz/codeLab/mantis/node_modules/thread-loader/dist/cjs.js'
      },
      {
        loader: '/Users/penglz/codeLab/mantis/node_modules/babel-loader/lib/index.js'
      }
    ]
  },

this is full view of vue-cli config, and i can't figure out what will happen after clearing the raw config(code above, exclude: [ filpath => { // some logic }]), so i didn't modify it(like the another answer).

in order to transpile some pkg, i create a new rule in my vue.config.js, it works with raw config

config.module
  .rule('resolveNodeModules')
  .test(/\.m?jsx?$/)
  .include.add(/node_modules\/(vue2-editor|quill|quill-delta)\/.*/)
  .end()
  .use('babel-loader')
  .loader('babel-loader')

in my config, i want to transiple vue2-editor/quill/quill-delta, it works and it should haven't affect raw config

Answer 3

You must use 'end' after exclude.add().