如何構建從另一個入口點包導入模塊的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文檔說您可以將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',
    })
  ]
};

這對於使用引用$的許多不同文件重構遺留代碼非常有用。