#javascript #reactjs #webpack
#javascript #reactjs #webpack
Вопрос:
В настоящее время я пытаюсь создать структуру приложения react, над которым я работаю, у меня есть домашняя страница, которую может видеть любой, и панель мониторинга, которую могут просматривать только пользователи с определенной ролью.
Я использую webpack. Как я могу разделить структуру проекта на разные страницы и разделить приложение так, чтобы оно загружало только те части, которые нужны пользователю?
Спасибо.
Комментарии:
1. Ищите точки входа в webpack
Ответ №1:
Webpack поддерживает несколько точек входа:https://webpack.js.org/concepts/entry-points/#multi-page-application
Вы можете определить их следующим образом:
module.exports = {
entry: {
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
}
};
Комментарии:
1. Я использую react router и webpack html pluging, должен ли я создавать разные HTML-страницы для каждой точки входа?
2. React router на самом деле не будет работать с этим, поскольку вам придется загружать разные js-файлы для разных страниц. Единственной возможностью для вас было бы использовать react-loadable: npmjs.com/package/react-loadable
3. Оно выполняет ту же работу, что и отложенная функция в react, я собираюсь использовать одну страницу index.html с подключением html webpack и динамическим импортом с использованием отложенной функции. Спасибо, Марвин.