Question

我的网站有两种页面：

javascript小部件是页面的主要内容（TypeA）以及小部件是一些其他内容的页面，用户可能会触发（TypeB）。

所以我想把我的JS代码库分成三个包：

vendor.js - 包含在所有网页上
runtime.js - 适用于小部件
不同网页的具体入口点

对于TypeA页面，我有这个：

<script src="vendor.js"></script>
<script src="runtime.js"></script>
<script src="pageA.js"></script>
<!-- pageA.js launches the widget -->

但是对于TypeB我想要这个：

<script src="vendor.js"></script>
<scriprt>
  <!-- pseudo code -->
  when('user clicks button', function() {
    require.ensure('pageB.js', function(require) {
        var pageBCode = require('pageB.js');
        <!-- do the magic -->
        <!-- but I also need runtime.js here -->
    });
  });
</script>

问题是，我想在 sync 和 async 页面中重用runtime.js。但我无法弄明白如何加载runtime.js以及我的按需加载pageB.js 。我仍然必须通过<script src="runtime.js"></script>包含它。

（我使用CommonChunksPlugin创建vendor.js和runtime.js，并且在TypeA页面上效果很好）

Answer 1

您可以将数组传递给require.ensure：

require.ensure(['pageB.js','runtime.js'], function(require){
  var pageBCode = require('pageB.js'),
      runtimeCode = require('runtime.js');

  /** MAGIC! **/
});

Webpack：require.ensure和额外的供应商捆绑

1 个答案: