Webpack 4 如何要求源作为单独的块并按需加载它们答案

【问题标题】：Webpack 4 how to require sources as separated chunks and load them on demandWebpack 4 如何要求源作为单独的块并按需加载它们
【发布时间】：2018-12-17 06:26:12
【问题描述】：

我注意到当我以旧方式导入源代码时，像这样：require('./my-script') 它将脚本代码注入到主 bundle.js 中。

当我这样导入时：import('./my-script') 它创建了一个单独的新文件，我什至可以将其命名为：

import(/* name.js */ './my-script');

这很好，但是在使用 import 而不是 require 的新方式中 - 我如何将参数发送到导入的函数？

例如，在require中我可以做require('./my-script')('something');

但是，使用 import

无法实现这一点

如何将参数传递给导入的函数并将其作为 webpack 中的单独块？

这是 my-script.js（仅作为示例）：

// my-script.js
module.exports = str => {
  return `${str} was returned`;
}

【问题讨论】：

标签： javascript webpack ecmascript-6 import

【解决方案1】：

import(name) 用于代码拆分（创建单独的块），一旦异步检索到块，它将返回模块导出的承诺。

通过您的示例，它可以与以下内容一起使用：

import('./my-script').then(myScript => myScript.default('hello'))

Dynamic imports 部分提供了一个更完整的示例，并描述了import() 如何用于代码拆分，Magic Comments 中列出的选项可用于控制块的创建方式和检索时间，以便您可以调整用户体验。

【讨论】：