Подумал тут, что talk is cheap и стоило бы, наверное, показать свой получившийся конфиг Rspack из предыдущего поста.
Когда-то я очень сильно топил за то, что тулинг для простых задач должен быть максимально простым. Я во все поля использовал create-react-app для React-проектов, но при этом использовал Broccoli.js (интересно, кто из подписчиков о нём знает?) для сборки лендингов и классических сайтов.
Не в последнюю очередь из-за скорости, но и формат конфига казался проще, чем у Gulp.
Использование же Webpack для классических HTML-страниц или библиотек выглядело тогда как совершенный бред. Вебпак — по своей сути — собирает все ресурсы в один JS-бандл (да-да, под словом все я имею в виду и HTML, и CSS, и JSON и вообще что угодно, включая картинки) и потом, если настроено, выплёвывает обратно уже обработанные файлы.
Тулинг прошёл большой путь с тех пор. И прямо сейчас в интернетах проходит срач на тему того, что create-react-app объявили устаревшим, а вместо него разработчикам предлагают подвязаться на Next.js, почти безальтернативно. При этом, команда React продолжает активно всех убеждать, что SPA всё ещё имеет смысл и конечно-конечно они не заставляют всех перейти на фреймворки и RSC. А ребятам из Vite.js крайне обидно :)
А мне, в свою очередь, обидно, что мало кто знает про Rspack! Потому, пришло время вам узреть мой конфиг :) Точнее, один из: https://gist.github.com/bekharsky/14ddc91ad72c736d56536b2fa4e16ea1
Если вы знакомы в Webpack, ничего удивительного не найдёте. А если вам придётся одновременно собирать несколько точек входа — то, поверьте, даже в Vite.js придётся прописать несколько html-файлов.
Итак, из интересного:
1. Несколько точек входа aka index.tsx-файлов в entry:
entry: {
main: './src/index.tsx',
migrationTool: './migrationTool/index.tsx',
insights: './insights/index.tsx',
},
2. Специально прописанный publicPath в секции output, позволяющий сёрвить результат откуда угодно (в моём случае — из Google Sheets). В идеале, он должен браться из .env:
output: {
publicPath: `https://www.somedevtunnel.com/static/`,
...
}
3. В секции module можно встретить кастомные загрузчики. И выглядят они довольно страшно, но на самом деле буквально взяты из документации по Fast Refresh. SCSS и PostCSS поддерживаются стандартными scss-loader и postcss-loader.
Опять же, если хочется простой замены CRA или Vite — есть Rsbuild, https://rsbuild.dev/. В нём всё из коробки.
Но, в целом, понимать, что же происходит — нужно.
4. Одной из крайне необходимых в легаси-проектах вещей является поддержка старых библиотек и плагинов. Поэтому в секции plugins я буквально копирую пару старых файлов в нужное место. Ну и, конечно, индикатор текущей среды — process — так необходимый реакту.
5. И что у нас остаётся? А остаётся немного настроить devServer. Я не использую https по простой причине: этим занимаются туннели. Ну и запись на диск совсем не обязательна. Да и вообще этот конфиг не нужен, если. не менять порт и работать локально.
Повторю, всё это уже из коробки имеется что в Vite, что в Rsbuild. В большинстве случаев конфиг или совсем не нужен, или будет раза в три меньше.
И если вы продолжаете собирать SPA — совсем не обязательно переходить на Next. В этом отношении мне поведение команды React очень непонятно.
Если интересна тема настройки конфигов сборки — пишите. Например, в том же Vite можно иметь несколько HTML-файлов и собирать их одновременно.
Делитесь своими конфигами. Наверняка же кто-то и Rollup использует, и Rolldown, и чистый esbuild.
#rspack #rsbuild #config