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?

Answer 1

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')
  }
};

Answer 2

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/",
    ]
}