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?

  1. 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.

  2. @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.