一个捆绑多个页面的 Webpack答案

【问题标题】：One bundle for several pages with Webpack一个捆绑多个页面的 Webpack
【发布时间】：2015-11-29 20:18:28
【问题描述】：

我有几页，想将所有脚本编译成一个包。

我知道每个页面可以有多个条目，但它会为不同的页面生成多个包。

为什么一个捆绑包对我如此重要：

当结果是一个包而不是多个包时，版本控制更方便（例如，bundle-1.0.1.js）
可以缓存一次，在所有页面中使用

类似这样的：

page1.html
...
<script src="bundle.js" entry-module="module-for-page1"></script>
...

page2.html 
...
<script src="bundle.js" entry-module="module-for-page2"></script>
...

【问题讨论】：

您可以编写处理entry-module="module-for-page2" 的逻辑。该模块需要所有其他模块并且是唯一的入口点。
@FelixKling。好吧，我是这样看的：将所有模块构建到一个包中，添加特殊的启动（入口）模块，该模块将搜索 entry-module attr，并指定 require()模块。问题是，webpack 不会捆绑所有模块，因为其中一些模块没有被其他模块引用。嗯……
@FelixKling。事实证明，我们可以有条件地要求模块，并且它们都将被捆绑。但是所有模块都应该在 require() 中明确指定。所以我的解决方案是this
是的，这正是我的意思。

标签： javascript webpack

【解决方案1】：

可能的解决方法的主要思想：

您在构建时将特殊的引导模块设置为入口点。该模块在运行时会从 script-tag 属性中提取启动模块的名称，并有条件地需要它。

webpack.config.js：

module.exports = {
   ...
   entry: "./webpack-entry-module.js",
   ...
}

webpack-entry-module.js：

var entryModule = document.querySelector('script').getAttribute('webpack-entry-module');

switch(entryModule) {
case 'module1.js': require('./module1.js'); break;
case 'module2.js': require('./module2.js'); break;
}

现在你可以从 html 中引用模块了：

page1.html:
<script src="bundle.js" webpack-entry-module="module1.js"></script>

page2.html:
<script src="bundle.js" webpack-entry-module="module2.js"></script>

完整的例子在这里：
https://github.com/artin-phares/webpack-entry-module

【讨论】：

如果链接失效，那么您的答案将变得毫无用处。在此处包含代码并解释您的解决方案。