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 trialDIJITUL UK
17,246 PointsWebpack 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
15,326 PointsHey 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
17,246 PointsDIJITUL UK
17,246 PointsSo it it normal for bundle.js to be a 7000 line file even though I've only imported React and ReactDOM ?
Tom Geraghty
24,174 PointsTom Geraghty
24,174 PointsI 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...