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

【问题标题】：How can I build a webpack bundle that imports a module from another entry point bundle?如何构建一个从另一个入口点包导入模块的 webpack 包？
【发布时间】：2017-01-23 19:14:34
【问题描述】：

我正在尝试生成第二个依赖于另一个包的 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？

【问题讨论】：

可能的解决方案here

标签： javascript webpack

【解决方案1】：

您可以使用提供插件通过以下方式执行此操作 -

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

这对于使用大量引用 $ 的不同文件重构遗留代码很有用。

【讨论】：

【解决方案2】：

选项 1

有两个独立的 Webpack 配置，每个包一个。在您的第一个包中，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 配置选项指定为现有块。您尝试将名称设置为您的 bundle1 入口点块名称，理论上 jQuery（以及所有块所需的其他库）将内置到包 1 中，而不是包 2。

【讨论】：

我选择了选项 2，因为当捆绑 1 中重用的库数量可变时，它似乎最具可扩展性。我用一组简单的模块对其进行了测试，您是正确的，因为公共块内置在使用name 参数定义的入口点中。