Question

我试图生成第二个依赖于另一个捆绑包的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构建为＆＃34; main＆＃34;我所有页面的JavaScript包，然后有bundle-two.js设置从bundle-one.js加载jQuery？

Answer 1

选项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"
    }
}

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

选项2

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

Answer 2

您可以使用提供插件 -

以下列方式执行此操作

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

这对于使用引用$。

的许多不同文件重构遗留代码非常有用

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

2 个答案: