Webpack 4, как требовать источники как отдельные блоки и загружать их по требованию

Question

Я заметил, что когда я импортирую исходный код по-старому, например так: require('./my-script') он внедряет код скрипта в основной bundle.js.

И когда я импортирую вот так: import('./my-script') он создал отдельный новый файл, и я даже могу назвать его с помощью:

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

Это хорошо, но по-новому использовать импорт вместо require - как я могу отправить параметры вимпортированная функция?

Например, в require я мог бы сделать require('./my-script')('something');

Однако этого нельзя достичь с помощью import

Как передать параметрыимпортировать функцию и создать ее как отдельный блок в веб-пакете?

Это my-script.js (только для примера):

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

Answer 1

import(name) используется для разделения кода (создания отдельных чанков) и возвращает обещание для экспорта модуля после асинхронного извлечения чанка.

В вашем примере его можно использовать с чем-то вроде следующего:

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

Раздел Динамический импорт предоставляет более полный пример и описывает, как import()используется для разделения кода, и здесь в Волшебные комментарии перечислены параметры, которые можно использовать для управления созданием чанка и его извлечением, чтобы вы могли настроить взаимодействие с пользователем.