Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Configuring Webpack

DIJITUL UK
DIJITUL UK
17,246 Points
Posted by DIJITUL UK
DIJITUL UK
17,246 Points

Webpack is bundling all of the files in node_modules?

Hey, question title says it all. When I run webpack it seems to bundle all the modules in node_modules even though its ignored in the webpack config. This is my output after running webpack:

 webpack
Hash: e8457a8108e5f7ca1d9e
Version: webpack 2.2.1
Time: 2809ms
   Asset    Size  Chunks                    Chunk Names
bundle.js  711 kB       0  [emitted]  [big]  main
   [1] ./~/fbjs/lib/warning.js 2.1 kB {0} [built]
   [9] ./~/react-dom/lib/ReactUpdates.js 9.53 kB {0} [built]
  [14] ./~/react/lib/ReactElement.js 11.2 kB {0} [built]
  [17] ./~/react-dom/lib/ReactReconciler.js 6.21 kB {0} [built]
  [18] ./~/react/lib/React.js 2.69 kB {0} [built]
  [78] ./~/react-dom/index.js 59 bytes {0} [built]
  [79] ./~/react/react.js 56 bytes {0} [built]
 [107] ./~/react-dom/lib/ReactDOM.js 5.14 kB {0} [built]
 [168] ./~/react/lib/ReactClass.js 26.5 kB {0} [built]
 [169] ./~/react/lib/ReactDOMFactories.js 5.53 kB {0} [built]
 [170] ./~/react/lib/ReactPropTypes.js 15.8 kB {0} [built]
 [171] ./~/react/lib/ReactPureComponent.js 1.32 kB {0} [built]
 [172] ./~/react/lib/ReactVersion.js 350 bytes {0} [built]
 [174] ./~/react/lib/onlyChild.js 1.34 kB {0} [built]
 [176] ./src/app.js 281 bytes {0} [built]
    + 162 hidden modules

This is my webpack.config.js

module.exports = {
    entry: './app.js',

    output: {
        // path: 'build',
        filename: 'bundle.js'
    },

    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            }
        ]
    }
};

my .babelrc

{
    "presets": ["react", "es2015"
    ]
}

And my app.js is just importing things and console logging so I can see the output.

// Libs
import React from "react";
import ReactDOM from "react-dom";

console.log("This is working");

Any help would be appreciated!

1 Answer

Michael Liendo
Michael Liendo
15,326 Points
Michael Liendo
Michael Liendo
15,326 Points

Hey there! It can be confusing, but fortunately it's not bundling your entire node_modules folder. The output in the terminal is saying that it's bundling only your code that is imported into your project. So when you import React/ReactDOM it's going to bundle that, but not everything that React depends on.

DIJITUL UK
DIJITUL UK
17,246 Points
DIJITUL UK
DIJITUL UK
17,246 Points

So it it normal for bundle.js to be a 7000 line file even though I've only imported React and ReactDOM ?

Tom Geraghty
Tom Geraghty
24,174 Points
Tom Geraghty
Tom Geraghty
24,174 Points

I think this gets addressed in the next video where they mention they will be cutting out unnecessary lines in the bundle.js generated file.

If you download the project files and cd into video-2/scoreboard-final you can see that the bundle.js file is 21'472 lines long. This is straight from the project download files, so I am going to assume those were configured and generated correctly.

Also, if you want to you could always test if it's ignoring your node_modules folder by commenting out or deleting the exclude line in your webpack config file. I bet the generated bundle.js file will be insanely huge if you did that...