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

Question

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

例如,假设我有以下入口点脚本(这些是简单的示例,只是使用它们来解决问题):

维管束one.js

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

维管束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配置,每个捆绑一个.在第一个包中,当您第一次使用expose-loader 需要它时,将其公开jQuery为全局变量:

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

然后,在第二个bundle配置中,告诉Webpack jQuery是"外部的",不应该与其余的代码捆绑在一起:

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

这样第一个bundle将jQuery暴露为全局变量,然后第二个bundle查找该全局变量而不是包含源.

选项2

我不确定这是否可行,但CommonsChunkPlugin文档说您可以将nameconfig选项指定为现有块.您尝试将名称设置为bundle1入口点块名称,理论上jQuery(以及所有块中需要的其他库)将构建到bundle 1中,而不是bundle 2.