CFW scripts

Во многом пакет аналогичен react-scripts из create-react-app.

Использование

1. Пакет требует версию nodejs 10+.

2. Установите @callfromweb-scripts в свой проект как dev зависимость

yarn add -D @callfromweb-scripts

3. Создайте необходимые файлы

• src/index.tsx - входная точка для клиентского приложения.
• src/index.ejs - template для html-webpack-plugin.

4. Используйте команды из @callfromweb-scripts:

• callfromweb-scripts start - запускает WebpackDevServer на localhost:3000.
• callfromweb-scripts build - компилирует клиент для использования в production.
• callfromweb-scripts bundle-analyze - запускает анализ пакетов для production сборки - webpack-bundle-analyzer.

Доступные настройки:

Несмотря на то, что все работает из коробки, вы можете захотеть поменять некоторые настройки сборщиков. Для этого предусмотрен механизмом overrides.

Расширение devServer:

Cоздайте в корне проекта dev-server.overrides.js, который будет расширять дефолтный devServer config. Нужен для удобного переключения между портами и хостами в dev режиме. Файл помещен в .gitignore в проекте, чтобы разработчики могли:

• делать интерфейсы, используя разные API в рамках 1 проекта
• запускать параллельно по 10 проектов на разных портах, не храня при этом информацию в git

Например:

const host = '10.160.150.113';
const port = 8080;

module.exports = {
  proxy: {
    '/rest': `http://${host}:${port}`,
  }  
}

Расширение webpack config development

Cоздайте в корне проекта webpack.overrides.js, который будет расширять дефолтный webpack config для development mode.

module.exports = {
  development: {
    resolve: {
      alias: {
        path: './path'
      }
    }
  },
}

Расширение webpack config production

Cоздайте в корне проекта webpack.overrides.js, который будет расширять дефолтный webpack config для production mode.

module.exports = {
  production: {
    resolve: {
      alias: {
        path: './path'
      }
    }
  },
}