javascript - 我如何构建一个从另一个入口点包导入模块的 webpack 包？

Question

我正在尝试生成依赖于另一个包的第二个 webpack 包。每个页面都需要 bundle-one，但只有部分页面需要 bundle-two。

例如，假设我有以下入口点脚本(这些都是微不足道的例子，只是用它们来说明要点):

bundle-one.js

import $ from 'jquery';
$(document).data('key', 'value');

bundle-two.js

import $ from 'jquery';
const value = $(document).data('key');

我知道我可以使用 CommonsChunkPlugin 生成包含 WebPack 加载器和 jQuery 的 commons.js 文件，但这需要在每个页面上同时加载 commons.js 和 bundle-one.js，即使我不需要加载 bundle-two.js。

所以，基本上:有没有一种方法可以将 bundle-one.js 构建为我所有页面的“主要”JavaScript 包，然后设置 bundle-two.js 以从 bundle-one.js 加载 jQuery？

Answer 1

选项 1

有两个独立的 Webpack 配置，每个包一个。在您的第一个 bundle 中，expose jQuery as a global variable when you first require it使用 expose-loader :

loaders: [
    { test: require.resolve('jquery'), loader: 'expose?jQuery!expose?$' }
]

然后，在你的第二个包配置中，tell Webpack that jQuery is "external"并且不应与其余代码捆绑在一起:

{
    externals: {
        // require("jquery") is external and available
        //  on the global var jQuery
        "jquery": "jQuery"
    }
}

这样，第一个包将 jQuery 公开为全局变量，然后第二个包查找该全局变量而不是包含源。

选项 2

我不确定这是否有效，但是 CommonsChunkPlugin documentation表示您可以将 name 配置选项指定为现有 block 。您尝试将名称设置为您的 bundle1 入口点 block 名称，理论上 jQuery(以及所有 block 所需的其他库)将内置到 bundle 1 而不是 bundle 2。