使用 System.import 在 Webpack 2 中整合捆绑包答案

【问题标题】：Consolidating Bundles in Webpack 2 with System.import使用 System.import 在 Webpack 2 中整合捆绑包
【发布时间】：2016-08-19 15:18:18
【问题描述】：

在 Webpack 1 中，我们使用 require.ensure 进行代码拆分导入，它可以采用一组模块。这些模块组合成一个包并通过一个 HTTP 请求获取：

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, e.g. '5.js'

使用 Webpack 2，我们现在可以使用 System.import 来获得更简洁的语法……但似乎 System.import 只接受单个模块来导入。很好——我可以使用Promise.all——但我最终得到了两个包：

Promise.all([
    System.import('module1'),
    System.import('module2')
]).then( (module1, module2) => {

    // use these modules here...
});

// ==> each module served as its own bundle, e.g. '5.js', '6.js'

有没有办法使用System.import，但仍将请求的模块组合成一个包？

（是的，在某些情况下，我可以添加一个新的模块文件，然后导入并使用这两个依赖项，这通常是最好的方法，但对于我的几个用例，它只是添加了额外的样板文件）

【问题讨论】：

标签： javascript webpack

【解决方案1】：

According to Sean T. Larkin (webpack core team)，使用一个文件来导入这两种资源是你最好的选择（就像你已经发现的那样）。

示例（未经测试）

bundle.js

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

导入单个文件

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

但是，使用 require.ensure 并没有什么缺点，除了，

无法通过 Promise 处理异步加载失败。 src

他提到了未来的变化，“may help with this”，但我没有强调这些可能是什么。

【讨论】：

【解决方案2】：

希望回答对你有帮助... 我在进行动态模块加载和归档时遇到了同样的问题，因为我不了解 ContextReplacementPlugin，所以将应用程序文件夹作为 webpack 2 的根上下文和 Ignore 插件。但这项工作并没有将所有内容捆绑在一个文件中。

这是sn-p：

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)
});

使用这种结构，您可以获取一个 api，然后将其用于动态加载。

然后在 webpack 中，我使用 IgonorePlugin 来避免 webpack 构建中的 *.html 文件：

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

这里是项目github：https://github.com/yurikilian/angular1es6

【讨论】：