如何构建一个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 loader和jQuery的commons.js文件，但这将要求在每个页面上加载both commons.js 和 bundle-one.js，即使我不需要加载bundle-two.js。所以基本上，是否有一种方法可以将bundle-one.js构建为所有页面的“主”JavaScript bundle，然后设置bundle-two.js从bundle-one.js加载jQuery？

- dstaley

---

可能的解决方案在这里。 - highFlyingSmurfs

Answer 1

选项1

有两个独立的Webpack配置，每个bundle一个。在第一个bundle中，使用expose-loader将jQuery作为全局变量暴露：

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

然后，在你的第二个捆绑配置中，告诉Webpack jQuery是"external"的，不应该与其余代码捆绑在一起：

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

这种方法使第一个捆绑包将jQuery作为全局变量公开，然后第二个捆绑包查找该全局变量而不是包含源代码。 选项2 我不确定这是否有效，但是CommonsChunkPlugin文档说您可以将name配置选项指定为现有块。您可以尝试将名称设置为bundle1入口点块名称，理论上jQuery（和其他在所有块中需要的库）将构建到bundle 1中，而不是bundle 2中。

- Andy Ray

---

我选择了第二个选项，因为当从bundle 1中重用的库的数量是可变的时，它似乎是最具可扩展性的。我使用一组简单的模块进行了测试，你说得对，公共块被构建到使用name参数定义的入口点中。 - dstaley

Answer 2

您可以使用提供的插件以以下方式完成此操作 -

//webpack.config.js
module.exports = {
  entry: './index.js',
  output: { 
    filename: '[name].js' 
  },
  externals: {
    jquery: 'jQuery'
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
    })
  ]
};

这对于重构具有很多不同文件引用 $ 的旧代码非常有用。

- Pritish Vaidya