i am building a tool of my own to trans pile and pack the related js files (that are written in ES6) into a bundle. so far it goes as expected with local files, but when i e to public modules, for example, react and redux etc, it's different. and i am wondering how to include these modules into the bundle? i found that there are always dist folders in most of the public modules with distributed versions residing in. so, are the dist folders always available in any module directory?

i am building a tool of my own to trans pile and pack the related js files (that are written in ES6) into a bundle. so far it goes as expected with local files, but when i e to public modules, for example, react and redux etc, it's different. and i am wondering how to include these modules into the bundle? i found that there are always dist folders in most of the public modules with distributed versions residing in. so, are the dist folders always available in any module directory?

• javascript
• webpack
• ecmascript-6

• No, it will depend on the specific third party library. – jonrsharpe Commented Mar 21, 2017 at 11:36
• No, @angular and rxjs to name a few, does not have dist folder. – Arg0n Commented Mar 21, 2017 at 11:37
• then how to include, say, the distributed version of any module ? – feiyuerenhai Commented Mar 21, 2017 at 11:42
• or how does webpack handler these problems ? – feiyuerenhai Commented Mar 21, 2017 at 11:43

1 Answer 1

Webpack uses the same module resolution as Node.js. node_modules have a package.json which has a main field, that determines which file is being imported when you import the module in your code. Additionally webpack looks for the browser or module fields in package.json and prefers them over main, if they are present. This makes it easy to publish a build that is different from the regular Node.js build (for instance to use ES modules (import/export), which are not supported by yet Node.js but by bundlers like webpack). This behaviour can be configured with the option resolve.mainFields. For an example have a look at the package.json of Redux.

None of these fields are mandatory, but at least main is supposed to be present, so you can simply import a module with:

import module from 'module';

Or with require:

const module = require('module');

Webpack automatically includes the modules you import into the bundle.

The dist directory is not any special, but it's very mon to have a dist directory that contains an UMD build. Especially as Unpkg allows you to import a node module without having to publish it manually to a CDN, it uses the dist or umd by default (as described at the bottom of the homepage).