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?

Marc Dix · Accepted Answer · 2019-07-15 09:55:38Z

14

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.

answered Jul 15, 2019 at 9:55

Marc Dix

1,9891 gold badge17 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

彭乐政 · Accepted Answer · 2021-04-29 07:06:06Z

 /* 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

Super Kai - Kazuya Ito · Accepted Answer · 2023-06-08 11:56:47Z

1

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

edited Jun 8, 2023 at 11:56

Super Kai - Kazuya Ito

42.7k23 gold badges257 silver badges256 bronze badges

answered Jun 2, 2023 at 7:26

Ivan YI

112 bronze badges

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related