如何从外部 url 包含 webpack 模块？答案

【问题标题】：How to include a webpack module from external url?如何从外部 url 包含 webpack 模块？
【发布时间】：2015-10-17 15:42:39
【问题描述】：

我有两个应用程序，都使用 webpack。每个应用程序都需要不同的 JavaScript 模块。例如，app1 不使用反应，app2 使用反应。我正在尝试将 app2 中的 webpack 模块包含到 app1 中。我正在使用CommonsChunkPlugin 从 app1 和 app2s 主文件中提取 webpack 运行时。因此，从 app1 开始，我有一个页面，其中包含 init.js 脚本、app1.js 脚本，然后我通过 url 包含了 app2.js 文件（即 http://proxy/app2/js/app2.js 通过代理，因此没有跨站点问题） .

app2 的 javascript 已加载，但似乎并没有实际加载 webpack 模块。 app2 中的任何必需模块（即反应）在 app1 的页面上加载时都找不到。

有没有办法做到这一点？我基本上希望它延迟加载 app2 包，但 webpack 似乎不想从 url 获取文件（我也不希望它在构建时获取它......）。我注意到 init.js 脚本是不同的，因为每个应用程序都有自己的入口点。这就像我需要指定一个延迟加载的入口点或其他东西。请帮忙！

【问题讨论】：

标签： webpack

【解决方案1】：

我刚刚发现 webpack 可以output Libraries 可以在其他应用程序中使用。因此，我更改了app2 以输出一个库，然后将其包含在app1 中，它就像一个魅力。如果需要，所有必需的依赖项也可以附带，或者您可以将它们指定为外部。这是我为 app2 配置的 webpack 配置示例：

var webpack = require('webpack');

module.exports.getConfig = function (type) {

    var isDev = type === 'development';

    var config = {
        entry: {
            one: "./src/main/javascript/one.js",
            two: "./src/main/javascript/two.js"
        },
        output: {
            path: __dirname + "/src/main/webapp/static/js",
            filename: "[name].js",
            library: ["MyLibrary", "[name]"],
            libraryTarget: "umd"
        },
        ...

然后在app1 中，我只需在脚本标签中包含脚本one.js，它就可以正常加载。请注意，我还必须从 app2 中删除 CommonsChunkPlugin，因为运行时会以您的库名称为前缀。因此，您需要将其全部包含在库中才能正确加载。

【讨论】：