Путь динамического импорта в webpack 5
Моя среда разработки состояла из Webpack 5, React 18, Typescript 5 и React-router-dom 6.23.0.
- Изначально структура моего кода выглядела так:
src
page
index.tsx
route.tsx
В файле маршрута.tsx:
{
path: '/',
lazy: async () => {
const { default: Component } = await import(`./page`)
return { Component }
},
}
Это сработало хорошо.
- Позже я скорректировал структуру кода следующим образом:
src
page
index.tsx
route
index.tsx
Я также изменил файл маршрута/index.tsx следующим образом:
{
path: '/',
lazy: async () => {
const { default: Component } = await import(`../page`)
return { Component }
},
}
Это тоже сработало хорошо.
- И затем, если я создам новую функцию для достижения этой цели
const lazy = (path: string) => {
return async () => {
const { default: Component } = await import(`${path}`)
return { Component }
}
}
{
path: '/',
lazy: lazy(`../page`),
}
произошла ошибка «Невозможно найти модуль '../страница'».
Почему это произошло и как это исправить?
Ответы 1
Webpack нуждается в некоторой подсказке относительно того, где находится ваш динамический модуль в вашей файловой системе. См. динамические выражения в документации по импорту.
Вы можете реструктурировать свой проект, чтобы вложить свои страницы в каталог, чтобы предоставить веб-пакету некоторый контекст относительно того, где находится модуль, или передать только неотносительную часть пути, или передать только базовое имя пути. Некоторые примеры:
использование родительского каталога
const lazy = (path: string) => {
return async () => {
const { default: Component } = await import(`../folder/${path}`)
return { Component }
}
}
lazy('page')
используя неотносительный путь (не уверен насчет этого)
const lazy = (path: string) => {
return async () => {
const { default: Component } = await import(`../${path}`)
return { Component }
}
}
lazy('page')
используя базовое имя пути
const lazy = (path: string) => {
return async () => {
const { default: Component } = await import(`../page/${path}`)
return { Component }
}
}
lazy('index')
Вы также можете отказаться от разделения кода веб-пакета с помощью волшебного комментария webpackIgnore: true .
const lazy = (path: string) => {
return async () => {
const { default: Component } = await import(/* webpackIgnore: true */ `${path}`)
return { Component }
}
}
lazy('../page')
@YaoTao рад, что смог помочь. Удачи с проектом.
спасибо за ваш повтор еще раз. Вы мне очень помогаете!