Question

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

来自app2的javascript被加载，但似乎并没有实际加载webpack模块。在app1中加载页面时，找不到app2所需的模块（即反应）。

有办法做到这一点吗？我基本上希望它懒得加载{{1}}包，但是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模块？

1 个答案: