如何从外部 url 包含一个 webpack 模块？

Question

我有两个应用程序，都使用 webpack。每个应用程序需要不同的 javascript 模块。例如，app1 不使用 React，app2 使用 React。我正在尝试将 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 中的 None 个所需模块（即反应）在 app1 的页面上加载时被发现。

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

Answer 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，因为运行时以您的库名称为前缀。因此，您需要将其全部包含在库中才能正确加载。

如何从外部 url 包含一个 webpack 模块？

How to include a webpack module from external url?

webpack