Posted in Uncategorized

How can I exclude node_modules from a webpack build?

   February 23, 2021  4 Comments on How can I exclude node_modules from a webpack build?

I have a specific question below, but I think the more general question is, how can I control what webpack adds to my build automatically (especially without depending on external modules)?

I have a simple 10-line js example I’m trying to use with webpack. When I run locally with webpack-dev-server, I see that bundle.js is >300KB. I assume this is because node_modules is being included, correct?

The file size of dist/bundle.js is ~2KB, so this is apparently being done at runtime.

I’ve added babel-loader and the necessary rules as specified on the package’s repo README to my webpack config. I don’t receive any errors when running locally, so I assume that the configuration is now correct.

However, my bundle.js is still showing 300KB+ in dev tools. How can I get rid of this stuff? This is simply a short example with plain JS inserting a single DOM element, so I (obviously) don’t need all the extra stuff.

None of the existing SO posts or blog articles I’ve been able to locate have been helpful (they all use some variation of exclude, and I’ve tried them all, and have seen config errors in cases where they weren’t specified correctly, so that’s why I believe it’s specified correctly now).

(Posting here because webpack questions are no longer answered on SO, which leaves no other resources AFAIK.)

Author: Fantashit

4 thoughts on “How can I exclude node_modules from a webpack build?”

  2. It looks like you just deleted/ignored our lovely crafted issue template. It was there for good reasons. Please help us solving your issue by answering the questions asked in this template. I’m closing this. Please open a new issue with filled issue template. Also make sure your issue is not a question. Questions should be posted on Stack Overflow.

  4. @hutch120
    It doesn’t work for me.

    Webpack.config.js

    `const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');

var HTMLWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
    template: __dirname + '/app/index.html',
    filename: 'index.html',
    inject: 'body'
});


module.exports = {
    entry: __dirname + '/app/index.jsx',
    mode: 'development',
   target: 'node', // in order too ignore built-in modules like path, fs, etc.
    externals: [nodeExternals()], // in order to ignore all modules in node_modules folder
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
            {
                test: /\.jsx$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            }
        ]
    },
    output: {
        filename: 'transformed.js',
        path:  __dirname + '/build'
    },
    plugins: [HTMLWebpackPluginConfig]


};`

    package.json

    {
  "name": "zinuku",
  "version": "1.0.0",
  "description": "",
  "main": "index.jsx",
  "scripts": {
    "build": "webpack-cli",
    "start": "webpack-dev-server"
  },
  "author": "Sebastian Nielsen",
  "license": "ISC",
  "dependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-react": "^6.24.1",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.16.3",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5",
    "webpack-node-externals": "^1.7.2"
  }
}
```
`

**bash, showing it build node_modules too**
`npm run start

```

> zinuku@1.0.0 start C:\Users\sebas\pycharmProjects\zinuku
> webpack-dev-server

i ｢wds｣: Project is running at http://localhost:8081/
i ｢wds｣: webpack output is served from /
i ｢wdm｣: Hash: 94790fc256e631986c59
Version: webpack 4.16.3
Time: 873ms
Built at: 2018-07-31 20:44:54
         Asset       Size  Chunks             Chunk Names
transformed.js     27 KiB    main  [emitted]  main
    index.html  221 bytes          [emitted]
Entrypoint main = transformed.js
[./app/components/App.jsx] 386 bytes {main} [built]
[./app/components/HeaderComponent/NavBar.jsx] 294 bytes {main} [built]
[./app/index.jsx] 209 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8081] (webpack)-dev-server/client?http://localhost:8081 7.78 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.58 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[loglevel] external "loglevel" 42 bytes {main} [built]
[react] external "react" 42 bytes {main} [built]
[react-dom] external "react-dom" 42 bytes {main} [built]
[sockjs-client/dist/sockjs] external "sockjs-client/dist/sockjs" 42 bytes {main} [built]
[strip-ansi] external "strip-ansi" 42 bytes {main} [built]
[url] external "url" 42 bytes {main} [built]
[webpack/hot/emitter] external "webpack/hot/emitter" 42 bytes {main} [built]
[0] multi (webpack)-dev-server/client?http://localhost:8081 ./app/index.jsx 40 bytes {main} [built]
    + 3 hidden modules
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./app/index.html] 372 bytes {0} [built]
    [./node_modules/lodash/lodash.js] 527 KiB {0} [built]
    [./node_modules/webpack/buildin/module.js] 497 bytes {0} [built]
i ｢wdm｣: Compiled successfully.
`
```

Comments are closed.