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

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

首先你需要了解在webpack中代码分割是如何工作的。
1. 其次，你需要使用CommonsChunkPlugin之类的东西来生成共享包。

在你开始使用webpack之前，你需要放弃对配置的依赖。Require.js都是关于配置文件的。这种心态使我很难过渡到webpack，它更接近于node.js中的CommonJS，它不依赖于配置。

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

Require.ensure

require.ensure是在应用程序中创建"分离点"的一种方法。同样，您可能认为需要对配置执行此操作，但事实并非如此。在这个例子中，当我在我的文件中点击require.ensure时，webpack将自动创建第二个bundle并按需加载它。在该分裂点内执行的任何代码都将被捆绑在一个单独的文件中。

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

要求([])

您也可以使用amd版本的require()实现相同的事情，该版本采用依赖项数组。这也将创建相同的分割点:

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

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

使用entry仅为单独的<script>标签，你想在你的页面。

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

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

这是我想到的解决方案。

首先，将这两个函数导出到window.*——您需要在浏览器中使用它们。

export function requireAsync(module) {
    return new Promise((resolve, reject) => require(`bundle!./pages/${module}`)(resolve));
}
export function runAsync(moduleName, data={}) {
    return requireAsync(moduleName).then(module => {
        if(module.__esModule) {
            // if it's an es6 module, then the default function should be exported as module.default
            if(_.isFunction(module.default)) {
                return module.default(data);
            }
        } else if(_.isFunction(module)) {
            // if it's not an es6 module, then the module itself should be the function
            return module(data);
        }
    })
}

然后，当您想要在页面上包含一个脚本时，只需将此添加到HTML中:

<script>requireAsync('script_name.js')</script>

现在pages/目录中的所有内容都将被预编译成一个单独的块，只有在需要时才能在运行时异步加载。

此外，使用上面的函数，您现在可以方便地将服务器端数据传递到客户端脚本:

<script>runAsync('script_that_needs_data', {my:'data',wow:'much excite'})</script>

现在你可以访问它了:

// script_that_needs_data.js
export default function({my,wow}) {
    console.log(my,wow);
}

我最近走了同样的路，我正在优化我的Webpack输出，因为我认为捆绑包太大了，HTTP2可以并行加载js文件，缓存单独的文件会更好，我在捆绑包中复制了一些依赖项，等等。虽然我得到了Webpack 4 SplitChunksPlugin配置的解决方案，但我目前主要使用Webpack的动态import()语法，因为该语法会导致Webpack自动将动态导入的包捆绑在自己的文件中，我可以通过"魔法注释"命名:

import(/* webpackChunkName: "mymodule" */ "mymodule"); // I added an resolve.alias.mymodule entry in Webpack.config

前一段时间我做了这样一个小的"概念证明"来检查importlazy在IE11中的工作方式。我不得不承认它是有效的:)单击按钮后，负责更改页面背景颜色的代码将被加载-完整示例

Js:

// polyfils for IE11
import 'core-js/modules/es.array.iterator';
const button = document.getElementById('background');
button.addEventListener('click', async (event) => {
  event.preventDefault();
  try {
    const background = await import(/* webpackChunkName: "background" */ `./${button.dataset.module}.js`);
    background.default();
  } catch (error) {
    console.log(error);
  }
})

<button id="background" class="button-primary" data-module="background">change the background</button>