Как изменить по дефолту react script ${path}?

Question

[evgenin]

По умолчанию запускается файл index.html и скрипт из /src/index.js,
а как сделать, чтобы запустить скрипт из:

1. файл index2.html и скрипт из /resources/js/app2.js
   
2. файл index3.html и скрипт из /resources/js/app3.js
   

....


Возможно можно прописать так как-то?
"scripts": {
"test": "react-scripts start --appHtml="/public/index2.html" --appIndexJs="/resources/js/applications/frontend/components/app",

Comments

[historydev]

Я уверен всем будет интересно, zachem? :/

[evgenin]

Владимир, есть backend, есть фронтент, который например отличается по дизайну, и чтобы запускать скрипт тот для правок и другой соотвественно.

Answer 1

[Андрей Hecc]

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

Comments

[evgenin]

То что вебпак собирает, это все настроено с разных точек входа, в данный момент нужна команда npm run-script react-scripts start, а не сборка пакетов.

[Андрей Hecc]

evgenin, Мне кажется, тут идет недопонимание с вашей стороны как устроен вебпак и как работает CRA.
В момент когда запускается react-scripts start происходит ничто иное, как запуск обычного webpack-dev-server.

Для того, чтобы сделать примерно то, что вы хотите, необходимо настроить:
а) Точки входа
б) Работу с чанками
в) HtmlWebPackPlugin для генерации необходимых статичных HTML файлов которые будут получается в результате работы пунктов а и б.

В результате должен получиться примерно вот такой код вебпака:

module.exports = {
  entry: {
    first: ['./src/first.js'],
    second: ['./src/second.js'],
  },
  output: {
    filename: '[name].js'
  },
...
// Для каждой точки входа вызывается свой HtmlWebpackPlugin
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/first.html",
      filename: "./first.html",
      chunks: ["first"]
    }),
    new HtmlWebPackPlugin({
      template: "./src/second.html",
      filename: "./second.html",
      chunks: ["second"]
    })
  ],
 }

Сборка webpack-ом включает в себя не только обработку js файлов, но и генерацию статики с подключенными модулями, а так же запуск дев сервера.
Если к примеру нужно запустить дев-сервер не одной командой, а разными, то эту всю штуку можно разбить на нужное количество файлов конфига:
project_one.webpack.config.js
project_two.webpack.config.js

Ну и дальше уже запускать через команду

webpack ./project_one.webpack.config.js 
webpack-dev-server ./project_two.webpack.config.js

Но повторюсь, что из коробки CRA этого не поддерживает. Придется делать npm run eject и разбиратся с фабрикой конфига которая лежит за командами react-scripts или написать что-то свое (или найти готовое уже в интернете).

p.s А если эти две версии приложения нету надобности запускать одновременно, то мне кажется самым простым решением будет просто разбить этот код на разные ветки в гите ¯\_( ツ)_/¯

Answer 2

[Alice]

Держи