React & Webpack - Проект настроен для многостраничного приложения
Я запускаю проект реакции (используя приложение create-react-app), в котором будет несколько компонентов «на одной странице». Итак, я предполагаю, что структура каталогов для разработки будет выглядеть следующим образом:
/Project
/node_modules
/public
/src
/components
/layout
/popup
...
/pages
/dashboard
index.js
/profiles
index.js
...
Если я построю проект без каких-либо изменений, он объединит весь исходный код и ресурсы в один каталог. Что ж, это не сработает для того, что я пытаюсь сделать для этого проекта. Мне нужны разные пакеты для каждой страницы. Таким образом, пакеты в папке / public должны выглядеть примерно так:
/Project
...
/build
/dashboard
/static
/css
/js
/media
index.html
/profiles
/static
/css
/js
/media
index.html
...
Я посмотрел раздел «Разделение кода» в документации по веб-пакету. Есть хороший пример с разными точками входа, но я не смог его адаптировать. Как я могу добиться желаемой настройки с помощью webpack и отреагировать?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Я бы предложил использовать разделение кода React, используя React загружаемый, не нужно изменять конфигурацию Webpack.
https://reactjs.org/docs/code-splitting.html
Да, сделай это, если сможешь. Это круто
Вопрос не в использовании динамической загрузки. Из документации webpack: «... Динамически загружаемый модуль не является точкой входа. Простое правило: одна точка входа на страницу HTML. SPA: одна точка входа, MPA: несколько точек входа ...». Я дошел до того, что удалил приложение и изменил производственную конфигурацию webpack. Похоже, что создание отдельной функции сборки - единственный способ сделать это.
Посмотрите документацию Webpack на Файлы с несколькими входами
И посмотрите примеры в github webpack
Я сделал, но как адаптировать его для приложения реакции? Вот в чем вопрос.
Возможно, уже поздно отвечать, но я столкнулся с той же проблемой и нашел простое решение, которым хотел бы поделиться.
Я выполнил следующие шаги:
- Несколько точек входа в webpack для каждой страницы
- имена пакетов динамического вывода для каждой точки входа
- Несколько выходных файлов html с разными именами файлов с использованием HtmlWebpackPlugin, также определяют определенные фрагменты (пакеты),
new HtmlWebpackPlugin({ filename: 'index.html',template: './src/index.html' ,chunks:['page1']})
- Каждый шаблон для каждой html-страницы будет иметь один div с определенным идентификатором, скажем, root, который используется приложением реакции для рендеринга своего приложения на dom.
- Теперь каждая точка входа js для каждой страницы будет иметь
ReactDOM.render(<Page1 />, document.getElementById("root"));
один вариант: создать запись для индекса каждого компонента «страницы». другой вариант: динамический импорт ()