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