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

我想要生成第二个依赖于另一个包的webpack包。每个页面都需要捆绑一个，但只有一些页面需要捆绑两个。如何构建从另一个入口点包导入模块的webpack包？

举例来说，假设我有以下的入口点的脚本（这是简单的例子，只是用它们来获得跨越点）：

捆one.js

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

捆two.js

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

我知道，我可以使用CommonsChunkPlug生成一个包含WebPack加载器和jQuery的commons.js文件，但这需要在每个页面上加载commons.js和bundle-one.js，即使我不需要加载bundle-two.js。

因此，基本上是否有一种方法可以将bundle-one.js构建为所有页面的“主要”JavaScript包，然后通过bundle-two.js设置从bundle-one.js加载jQuery？

来源

2016-09-15 dstaley

可能的解决方案[here]（http://stackoverflow.com/questions/30329337/how-to-bundle-vendor-scripts-separately-and-require-them-as-needed-with-webpack?rq=1 ） – highFlyingDodo

选项1

有两个单独的WebPack CONFIGS，一个用于每个束。在你的第一个包，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（以及所有块所需的其他库）将内置到捆绑包1中，而不是捆绑包2.

来源

2016-09-29 00:36:02

我选择了Option 2，因为从捆绑软件1中重用的库的数量是可变的，它似乎是最具可扩展性的。我用一组简单的模块对它进行了测试，并且您正确的是将常用块内置到使用'name'参数定义的入口点中。 – dstaley

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

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

这对重构具有许多不同文件引用$的遗留代码很有用。

来源

2016-09-30 14:37:57

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

回答

相关问题