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

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


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.


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