Webpack not excluding node_modules

Question

I'm using webpack for a Node framework that I'm building (though I should probably use gulp, admittedly). When I include the EJS module, webpack includes it in the compiled source, even though I explicitly tell it to exclude the node_modules dir.

module.exports = {
    context: __dirname,
    target: 'node',
    // ...
    output: {
        libraryTarget: 'commonjs'
        // ...
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader?{ "stage": 0, "optional": ["runtime"] }'
            }
        ]
    }
};

As you can see, I have a test for JS files, and I tell it to exclude node_modules; why is it ignoring my exclude?

Answer 1

From your config file, it seems like you're only excluding node_modules from being parsed with babel-loader, but not from being bundled.

In order to exclude node_modules and native node libraries from bundling, you need to:

1. Add target: 'node' to your webpack.config.js. This will define NodeJs as the environment in which the bundle should run. For webpack, it changes the chunk loading behavior, available external modules and generated code style (ie. uses require() for NodeJs) it uses during bundling.

2. Set the externalPresets of node to true. As of Webpack@5, This configuration will exclude native node modules (path, fs, etc.) from being bundled.

3. Use webpack-node-externals in order to exclude other node_modules.

So your result config file should look like:

var nodeExternals = require('webpack-node-externals');
...
module.exports = {
    ...
    target: 'node', // use require() & use NodeJs CommonJS style
    externals: [nodeExternals()], // in order to ignore all modules in node_modules folder
    externalsPresets: {
        node: true // in order to ignore built-in modules like path, fs, etc. 
    },
    ...
};

Answer 2

If you ran into this issue when using TypeScript, you may need to add skipLibCheck: true in your tsconfig.json file.

Answer 3

Try use absolute path:

exclude:path.resolve(__dirname, "node_modules")

Answer 4

For some reason, the solutions above didn't work for me in my TypeScript project, what worked was configuring webpack production and development mode options.

Step 1

Install webpack merge (This allows you to have a similar configuration)

npm install --save-dev webpack-merge

Step 2.

Create webpack.dev.js and webpack.prod.js files in the same directory as your webpack.config.js.

touch webpack.dev.js webpack.prod.js

Step 3.

Paste this code inside your webpack.dev.js file:

// webpack.dev.js
const { merge } = require("webpack-merge");
const config = require("./webpack.config.js");

module.exports = merge(config, {
  mode: "development",
  devtool: "inline-source-map",
});

• Paste the same code in the webpack.prod.js file but change the mode to 'production' and delete the devtool key.

// webpack.prod.js
const { merge } = require("webpack-merge");
const config = require("./webpack.config.js");

module.exports = merge(config, {
  mode: "production",
});

Step 4.

Update your package.json file to use the new configuration files:

// package.json
"scripts": {
    "dev": "webpack --watch --config webpack.dev.js",
    "build": "webpack --watch --config webpack.prod.js"
  },

Now simply execute npm run dev to see your changes

With this solution, you don't need to run build for every change and node_modules is excluded from the compiler.

You can read more about this solution webpack production mode

Answer 5

This worked for me:

exclude: [/bower_components/, /node_modules/]

module.loaders

A array of automatically applied loaders.

Each item can have these properties:

test: A condition that must be met

exclude: A condition that must not be met

include: A condition that must be met

loader: A string of "!" separated loaders

loaders: A array of loaders as string

A condition can be a RegExp, an absolute path start, or an array of one of these combined with "and".

See http://webpack.github.io/docs/configuration.html#module-loaders

Answer 6

try this below solution:

exclude:path.resolve(__dirname, "node_modules")