CODEWITHSUNDEEP
reactjswebpack
Ozymandias
Ozymandias

Reputation: 2759

How does Webpack determine what to include in its bundle?

Assume I have a project with the following structure 

/app
|_webpack.config.js
|_package.json
|_/npm_modules
| |_...
|_/client
  |_/misc
  | |_...
  |_/components
  | |_...
  |_index.jsx

and webpack.config.js contains this 

entry: ["./client/index.jsx"]

and index.jsx loads all components like this

var components = [];
var componentPaths = require.context("./components", false);
componentPaths.keys().forEach(function(path)  {
    components.push(componentPaths(path));
});

What files will be bundled into the resulting bundle.js?
Will it just be /app/client/index.jsx and all files in the /app/client/components directory?
Or will the entire /app/client directory be bundled (including everything under /app/client/misc)?
Or will the entire /app directory be bundled (including everything under /app/npm_modules)?

I've been trying to figure this out based on the Webpack docs, but they are inadequate. If you know the answer, including a reference to where you found the information would be very helpful.

I'm asking because I want to set up a project that has multiple entry points where the resulting bundle.js files only include what is necessary.

Upvotes: 1

Views: 1578

Answers (1)

Pier
Pier

Reputation: 10827

Because you use import or require. If a file is not imported or required it will not be included in the bundle.

It's explained here.

Note: import is an ES6 feature and you'd need Babel to use it across most browsers.

Upvotes: 6

Related Questions