Merging collections in Webpack 2 using System.import

Question

In Webpack 1, we import code using require.ensure , which can accept an array of modules. These modules are combined into one package and are selected with one HTTP request:

 require.ensure(['module1', 'module2'], (require) => { const module1 = require('module1'); const module2 = require('module2'); // use these modules here... }); // ==> both modules are served as a single bundle, eg '5.js' 

With Webpack 2, we can now use System.import for a cleaner syntax ... but it looks like System.import only accepts one module for import. Fine - I can use Promise.all - but then I end up with two bundles:

 Promise.all([ System.import('module1'), System.import('module2') ]).then( (module1, module2) => { // use these modules here... }); // ==> each module served as its own bundle, eg '5.js', '6.js' 

Is there a way to use System.import , but still merge the requested modules into one package?

(Yes, in some cases I can add a new module file, which, in turn, imports and consumes both dependencies, and often the best approach, but for some of my use cases it just adds an additional template)

Answer 1

According to Sean T. Larkin (the main webpack team) , using a single file that imports both resources is your best bet (for example, you've already discovered).

Example (untested)

bundle.js

 //http://stackoverflow.com/a/36878745/402706 export {default as module1} from './modules/module1'; export {default as module2} from './modules/module2'; 

Import single file

 System.import('bundle').then({ module1, module2 } => { // do stuff }).catch(err => { console.log("Chunk loading failed"); }); 

However, there is no drawback to using require.ensure , since you have it besides

Inability to handle asynchronous load fails with promise. src

He mentioned future changes that “ might help with this ,” but I did not insist on what it might be.

Answer 2

I hope the answer helps you ... I had the same problem as loading the dynamic module and archiving that combining the application folder as the root context of webpack 2 and the Ignore plugin because I did not understand ContextReplacementPlugin. But this work does not bind everything in one file.

Here's a snippet:

 import angular from 'angular'; var paths = ["components/app.components.js", "shared/app.shared.js"]; Promise.all(paths.map(path => System.import('../app/' + path))).then(modules => { let dependencies = []; modules.forEach(module => { dependencies.push(module.default.name); }) angular.module("app", dependencies); angular.bootstrap(document, ['app']); }).catch(error => { console.error(error.message) }); 

Using this structure, you can get api and then use it for dynamic loading, for example.

Then in webpack I used IgonorePlugin to avoid * .html files from the webpack assembly:

  plugins: [ new webpack.IgnorePlugin(/vertx/), new webpack.optimize.UglifyJsPlugin({ sourceMap: true }), new webpack.IgnorePlugin(/[A-Za-z]*\.(html)$/i) ], 

Here is the github project: https://github.com/yurikilian/angular1es6