How to exclude directory from getting bundled by Webpack?

Question

Expected:

When I build with webpack, all my JS files get bundled except for the files in the ./src/Portfolio directory as per my Webpack.config.js settings.

Actual:

Webpack bundles all the files including the ones in the directory despite the settings and other variations i have provided within webpack.config.js.

Code:

Webpack.config.js

const path = require('path'); module.exports = { entry: './src/index.js', devtool: 'source-map', mode: 'development', module: { rules: [ { test: /\.js$/, exclude: [ path.resolve(__dirname, './src/Portfolio/') ] } ] }, output: { filename: 'main.js', path: path.resolve(__dirname, 'dist') } };

Output:

How can i successfully exclude the ./src/Portfolio directory and its contents?

can you try path.resolve(__dirname, './src/Portfolio/*') ? — Nisarg
– Nisarg, Commented Aug 28, 2018 at 13:52
The portfolio directory still gets included, the output did not change. I ran with npx webpack — NewScientists
– NewScientists, Commented Aug 28, 2018 at 13:55

Chris Hawkes · Accepted Answer · 2018-08-28 14:24:56Z

32

Depending on what your folder structure looks like it appears you aren't providing it the right directory location to exclude. I would think something like this should work, but if not please share your folder structure.

const path = require('path'); module.exports = { entry: './src/index.js', devtool: 'source-map', mode: 'development', module: { rules: [ { test: /\.js$/, exclude: [ './src/Portfolio/' ] } ] }, output: { filename: 'main.js', path: path.resolve(__dirname, 'dist') } };

answered Aug 28, 2018 at 14:24

Chris Hawkes

12.5k6 gold badges60 silver badges69 bronze badges

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

5 Comments

NewScientists Over a year ago

Strange it worked! thanks dude!, also we are big fan of yours Chris, watching for years feel free to drop by and join our Youtube developers community here discord.gg/gE5kZx you'd be VIP straight away cheers

Chris Hawkes Over a year ago

That is awesome :) thank you! I will look to join. I've been terribly busy lately but it's starting to even out.

Anupam Maurya Over a year ago

how to exclude, the multiple folder in exclude array, I have used but not working for me. exclude: [ /node_modules/, path.resolve(__dirname, 'images/' + project.appName) ]

Yoruba Over a year ago

@Anupam Maurya, I think that you have to use RegEx instead of an array of strings. This is working exclude: [/node_modules/, /images/, /content/]

birbybebob Jun 11 at 7:57

Thanks for the help. At the time I found this, it's already 6 years old, but in my situation, I was able to use this accepted solution without the relative path. In my case the ./path/to/folder was a problem when using Webpack. I had to change it to an absolute path like /path/to/folder.

Pete Hayman · Accepted Answer · 2021-04-03 23:27:07Z

I know the op is using javascript, fyi a similar problem can occur using typescript with webpack.

In this case excluded directories can be added to tsconfig.json instead of webpack.config.js,

//tsconfig.json { "compilerOptions": { ... }, "exclude": [ "./src/Portfolio/", ] }

Collectives™ on Stack Overflow

How to exclude directory from getting bundled by Webpack?

2 Answers 2

5 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Linked

Related