Webpack загружает различные модули на основе чанка

Question

Можно ли заставить веб-пакет загружать другой модуль на основе некоторой контекстной информации?

Например, у меня есть две версии моего приложения React: настольная и мобильная

В моем index.jsЯ решаю, какое приложение загрузить:

if (isMobile()) {
   loadMobile().then(({default: App}) => render(App))
}

Теперь я хотел бы повторно использовать некоторые модули, но некоторые я бы хотел переопределить.Поэтому по умолчанию он должен загружать index.js, но если контекст isMobile и рядом с файлом index.js a mobile.js существует, он должен загрузить вариант mobile.

components/
  Button/
    index.js
    mobile.js

В мобильном контексте веб-пакет должен загружать mobile.js вместо index.js

Я не мог найти ничего, что я мог бы использовать для решения этой проблемы, какие-либо идеи?

---

PS: я уже создал проблему на github, она также демонстрирует проблему и то, чего я хочу достичь еще лучше:

https://github.com/webpack/enhanced-resolve/issues/180

Answer 1

Для этой проблемы вы можете использовать функцию динамической загрузки и синтаксис динамического импорта.

1. Установите плагин Babel plugin-syntax-dynamic-import:

   npm install --save-dev @babel/plugin-syntax-dynamic-import
   

   и используйте его в .babelrc

   {
     "plugins": ["@babel/plugin-syntax-dynamic-import"]
   }
   

2. Вам необходимо создать компонент с именем load со следующими кодами:

       export default const load = (platform="index") => componentName => 
       import(`components/${componentName}/${platform}.js`);
   

3. Затем используйте динамический импорт с функцией загрузки, как в следующем коде:

       const { Button } = await import("components/Loader.jsx").then(load => {
         load(${platform})(${componentName})
       })
   

Эти статьи могут вам помочь:

• https://medium.com/front-end-weekly/webpack-and-dynamic-imports-doing-it-right-72549ff49234

• https://blog.jscrambler.com/how-to-make-your-app-faster-with-webpack-dynamic-imports/

• https://webpack.js.org/guides/code-splitting/#dynamic-imports

Answer 2

Полагаю, вам нужно создать две сборки: одну со значением по умолчанию resol.mainFiles и одну со значением

resolve: {
    mainFiles: ['mobile', 'index']
}

Вам нужно будет решить, какой пакет загрузить в html.Или создайте два разных html-файла и переместите логику isMobile в конфигурацию веб-сервера, чтобы она решала, какой html возвращать пользователю.

Некоторые чанки могут быть одинаковыми в обеих сборках.Но очень вероятно, что в итоге вы получите два разных приложения.Вы можете уменьшить дублирование встроенного кода между двумя приложениями с помощью DllPlugin .

Answer 3

Есть два способа добиться этого.

1. Создайте 2 точки входа по 1 для мобильных и настольных компьютеров, чтобы веб-пакет генерировал 2 пакета. Вы можете загрузить только нужный пакет из html.
2. Если вы require/import Мобильный код внутри loadMobile(), веб-пакет автоматически разбивает код на 2 пакета. Мобильный пакет загружается только при необходимости.