如何通过将非导入（非导出）文件包含在捆绑包中来缓慢集成Webpack？

Question

I'm working in a project where we want to integrate Webpack into our workflow. The problem is, we have over 1000 AngularJS files and adding import/export to all of them in one go is not an option for us. We'd like to bundle all of them and slowly incorporate the import/exports as we work on each file over time.

How would you approach that problem? Any specific best practices when doing this?

Answer 1

We literally had the same problem. Essentially you want to create "entry point files" that perform require s for all your files, since this is how webpack works (it follows the dependency tree). Then point webpack at these "entry point files".

The example at the link above uses TypeScript, but you can easily use ES5 like this:

# ./entry-points/feature1.js
importAll = function(r) {
  r.keys().forEach(r);
};

importAll(require.context('./app/feature1', true, /module\.js$/));
importAll(require.context('./app/feature1', true, /(^(?!.*(spec|module)\.js).*\.js)$/));

You can grab a polyfill for Object.keys here , and Array.forEach` here .

Then point to this file from your webpack config like this:

entry: {
  'feature1': './entry-points/feature1.js'
}

You can read more details here