代码之家  ›  专栏  ›  技术社区  ›  Raz Buchnik

Webpack4如何要求源作为单独的块并按需加载它们

  •  1
  • Raz Buchnik  · 技术社区  · 7 年前

    我注意到,当我以旧方式导入源时,如下所示: require('./my-script') 它将脚本的代码注入主bundle.js中。

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

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

    这很好,但是在使用import而不是require的新方法中——我如何向导入的函数发送参数?

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

    然而,这是无法实现的 进口

    如何将参数传递给导入的函数并使其成为Webpack中的单独块?

    这是my-script.js(例如仅限):

    // my-script.js
    module.exports = str => {
      return `${str} was returned`;
    }
    
    1 回复  |  直到 7 年前
        1
  •  1
  •   Filip Dupanović    7 年前

    import(name) 用于代码拆分(创建单独的块),并在异步检索块后返回模块导出的承诺。

    在您的示例中,它可以与以下内容一起使用:

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

    这个 Dynamic imports 本节提供了一个更完整的示例,并描述了如何 import() 用于代码拆分,此处位于 Magic Comments 列出了可用于控制如何创建块以及何时检索块的选项,以便调整用户体验。