javascript - 带有小初始脚本和异步加载所有其他脚本的 Webpack

Question

在开发由多个页面和不同页面类型组成的普通网站时，我已经开始使用 Webpack。我习惯了 RequireJs 脚本加载器，它在需要时按需加载所有依赖项。页面加载时只下载一小段 javascript。

我想实现的是:

• 一个小的初始 javascript 文件，用于异步加载依赖项
• 每种页面类型都可以有自己的 javascript，它们也可能有依赖关系。
• 公共(public)模块， vendor 脚本应该捆绑在公共(public)脚本中

我已经尝试了很多配置来实现这个但没有成功。

entry: {
    main: 'main.js', //Used on all pages, e.g. mobile menu
    'standard-page': 'pages/standard-page.js',
    'start-page': 'pages/start-page.js',
    'vendor': ['jquery']
},
alias: {
    jquery: 'jquery/dist/jquery.js'
},
plugins: [
    new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.js"),
    new webpack.optimize.CommonsChunkPlugin('common.js')
]

在 html 中，我想像这样加载 javascripts:

<script src="/Static/js/dist/common.js"></script>
<script src="/Static/js/dist/main.js" async></script>

并在特定的页面类型上(起始页)

<script src="/Static/js/dist/start-page.js" async></script>

common.js 应该是一个用于快速加载页面的小文件。 main.js 在里面加载 async 和 require('jquery')。

Webpack 的输出看起来很有希望，但我无法让 vendor bundle 异步加载。其他依赖项(我自己的模块和 domReady)加载到自动生成的 block 中，但不是 jquery。

我可以找到很多几乎可以做到这一点的例子，但不是异步加载 vendor 的重要部分。

webpack 构建的输出:

                  Asset       Size  Chunks             Chunk Names
            main.js.map  570 bytes    0, 7  [emitted]  main
                main.js  399 bytes    0, 7  [emitted]  main
       standard-page.js  355 bytes    2, 7  [emitted]  standard-page
c6ff6378688eba5a294f.js  348 bytes    3, 7  [emitted]
          start-page.js  361 bytes    4, 7  [emitted]  start-page
8986b3741c0dddb9c762.js  387 bytes    5, 7  [emitted]
              vendor.js     257 kB    6, 7  [emitted]  vendor
              common.js    3.86 kB       7  [emitted]  common.js
2876de041eaa501e23a2.js     1.3 kB    1, 7  [emitted]  

Answer 1

这个问题的解决方案有两个:

1. 首先你需要了解how code-splitting works in webpack
2. 其次，您需要使用类似 CommonsChunkPlugin 的东西生成该共享包。

代码拆分

在开始使用 webpack 之前，您需要摆脱对配置的依赖。 Require.js 是关于配置文件的。这种心态让我很难过渡到 webpack，它更接近于 node.js 中的 CommonJS 建模，不依赖于任何配置。

考虑到这一点，请考虑以下内容。如果您有一个应用程序并且希望它异步加载 javascript 的其他部分，您需要使用以下范例之一。

要求.确保

require.ensure是您可以在应用程序中创建“拆分点”的一种方法。同样，您可能认为需要通过配置来完成此操作，但事实并非如此。在我点击 require.ensure 的示例中在我的文件中，webpack 将自动创建第二个包并按需加载它。在该拆分点内执行的任何代码都将捆绑在一个单独的文件中。

require.ensure(['jquery'], function() {
    var $ = require('jquery');
    /* ... */
});

要求([])

您也可以使用 AMD 版本的 require() 实现同样的效果，接受一系列依赖关系的那个。这也将创建相同的分割点:

require(['jquery'], function($) {
    /* ... */
});

共享包

在上面的示例中，您使用了 entry创建一个 vendor有 jQuery 的包。您不需要手动指定这些依赖包。相反，使用上面的分割点，webpack 将自动生成它。

使用 entry仅适用于单独的 <script>您想要在页面中添加的标签。

现在您已经完成了所有这些，您可以使用 CommonsChunkPlugin进一步优化你的 block ，但同样大部分魔法都是为你完成的，除了指定应该共享哪些依赖项之外，你不需要做任何其他事情。 webpack将自动拉入共享 block 而不需要额外的 <script>标签或 entry配置。

结论

您描述的场景(多个 <script> 标签)实际上可能不是您想要的。使用 webpack，所有的依赖项和包都可以从一个 <script> 开始自动管理。标签。在经历了从 require.js 到 webpack 的多次重构迭代后，我发现这通常是管理依赖项的最简单和最好的方法。

祝一切顺利!