Я тут занялся изучением REACT… и столкнулся с такой задачей, как совместить webpack + react. Нашел интересную статью, тут опубликую ее перевод.

Начало:

Перед запуском на вашем компьютере должен быть установлен npm, который идет в комплекте с Node.js , вы можете установить его отсюда

Структура папки:

Вы можете создать указанные выше каталоги с помощью этих команд.

mkdir react-boilerplate
cd react-boilerplate
mkdir -p src/components src/styles

Инициализировать проект:

Все проекты, использующие диспетчер пакетов узлов (npm), должны быть инициализированы. Чтобы инициализировать проект, введите в терминале команду ниже. Это создаст файл package.json .

npm init

Вам будет задано несколько вопросов, связанных с проектом, вы можете пропустить их, нажав клавишу ввода, если вы хотите пропустить все вопросы, добавьте флаг -y.

npm init -y

Теперь ваш файл package.json будет выглядеть примерно так.

{
"name": "react-boilerplate",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}

Установка Webpack:

Webpack — это сборщик модулей, который позволяет нам объединять наши файлы проекта в один файл для производства. Итак, давайте добавим веб-пакет в наш проект.

npm install webpack webpack-cli --save-dev

Вышеупомянутая команда добавит webpack и webpack-cli в качестве зависимости разработчика к нашему проекту. Мы установили webpack-cli, чтобы мы могли использовать webpack в командной строке.

Установка React:

Установите react и react-dom в качестве зависимости.

npm install react react-dom --save

Установка Babel:

Чтобы React работал, нам нужно установить вместе с ним Babel. Нам нужен Babel для переноса ES6 и JSX в ES5.

Установите babel-core , babel-loader , babel-preset-env , babel-preset-react в качестве зависимости разработчика.

npm install @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev

• babel-core: преобразует код ES6 в ES5
• babel-loader: помощник Webpack для транспиляции кода с учетом предустановки.
• babel-preset-env : Предустановка, которая помогает babel конвертировать код ES6, ES7 и ES8 в ES5.
• babel-preset-react: пресет, преобразующий JSX в JavaScript.

Index.js:

Создайте файл index.js в корне папки / src , а пока добавьте в него следующий код строки. Этот файл будет точкой входа в наше приложение.

console.log("hello");

Index.html:

Создайте файл index.html в корне папки / src и добавьте в него следующий код.

Входной и выходной файл:

Создайте webpack.config.js в корневом каталоге проекта, чтобы мы могли определять правила для наших загрузчиков.

Определите точку входа и выходной каталог нашего приложения в файле webpack.config.js

В приведенном выше коде Webpack объединит все наши файлы JavaScript в файл index-bundle.js внутри каталога / dist .

Загрузчики Webpack:

Теперь добавьте в этот файл несколько загрузчиков, которые будут отвечать за загрузку и объединение исходных файлов.

Внутри webpack.config.js добавьте следующие строки кода:

Здесь babel-loader используется для загрузки наших файлов JSX / JavaScript, а css-loader используется для загрузки и объединения всех файлов CSS в один файл, а style-loader добавит все стили в тег стиля документа.

Прежде чем Webpack сможет использовать css-loader и style-loader, мы должны установить их как dev-dependency.

npm install css-loader  style-loader --save-dev

Имейте в виду, что webpack выполняет загрузчики от последнего к первому, т.е. справа налево.

.babelrc:

Теперь создайте файл .babelrc внутри корня каталога проекта со следующим содержимым внутри него.

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Этот файл сообщит babel, какие предустановки использовать для транспиляции кода. Здесь мы используем две предустановки:

• env : этот пресет используется для переноса кода ES6 / ES7 / ES8 в ES5.
• реагировать : Этот пресет используется для transpile JSX код ES5.

Компиляция файлов с помощью Webpack:

Добавьте следующие строки кода в объект сценария файла package.json, как показано ниже:

"start": "webpack --mode development --watch", 
"build": "webpack --mode production"

Здесь я использовал флаг просмотра , поэтому всякий раз, когда происходит изменение исходных файлов, webpack автоматически компилирует все исходные файлы.

В webpack 4 есть два режима: производственный режим, который создает оптимизированные файлы, готовые к использованию в производственном режиме, и режим разработки, который создает простой для чтения код и дает вам лучший опыт разработки. --modeФлаг позволяет нам выбрать режим , который будет использовать.

Теперь вы можете скомпилировать проект, используя следующую команду:

npm start

После выполнения указанной выше команды вы увидите файл index_bundle.js, созданный в каталоге / dist, который будет содержать транспилированный код ES5 из файла index.js .

App.js

Создайте файл App.js внутри папки компонентов папки src со следующим содержимым внутри него.

App.css:

Создайте файл App.css внутри папки стилей папки src со следующим содержимым внутри него.

Этот файл CSS используется, чтобы убедиться, что css-loader и style-loader работают правильно.

Теперь измените файл index.js, который мы создали ранее, чтобы он содержал следующие строки кода.

Установка плагина Html-webpack:

Теперь нам также нужно установить html-webpack-plugin , этот плагин генерирует файл HTML, вставляет скрипт в файл HTML и записывает этот файл в dist / index.html .

Установите html-webpack-plugin как dev-dependency:

npm install html-webpack-plugin --save-dev

Теперь нам нужно настроить этот плагин внутри файла webpack.config.js , добавив в него следующие строки кода.

Здесь значение ключа шаблона — это файл index.html, который мы создали ранее, и он использует этот файл в качестве шаблона и создает новый файл с именем index.html внутри папки / dist с внедренным скриптом.

Настройка почти завершена, все, что нам нужно сделать, это скомпилировать исходные файлы с помощью webpack, вы можете запустить проект, используя следующую команду:

npm start

Вы получите вывод в папке / dist проекта. Теперь откройте index.html в веб-браузере, вы увидите текст «My React App!» внутри него.

Но у этого подхода есть обратная сторона: вам нужно вручную обновить веб-страницу, чтобы увидеть внесенные вами изменения. Чтобы webpack отслеживал наши изменения и обновлял веб-страницу всякий раз, когда в наши компоненты вносятся какие- либо изменения, мы можем установить webpack-dev-server.

Установка Webpack-dev-server:

Установите webpack-dev-server как dev-dependency

npm install webpack-dev-server --save-dev

И измените стартовый скрипт package.json, как показано ниже:

"start": "webpack-dev-server --mode development --open --hot"

Я добавил два флага , --openи --hotкоторая открывает и обновляет веб — страницу , когда любое изменение производятся компоненты.

Теперь запустите в терминале следующую команду:

npm start

Вы должны увидеть открытое окно браузера и отобразить содержимое, как на снимке экрана ниже.

Вот и все, теперь у нас есть собственный шаблон React, который мы можем использовать для создания наших проектов React. Вы также можете скачать эту настройку реакции с моего Github .

Если вы нашли эту статью полезной, нажмите кнопку 👏. Если есть сомнения, можете прокомментировать ниже, буду рад помочь 🙂

---

От себя добавлю.

В ходе создания игры «Крестики-нолики» при запуске сервера возникала ошибка.

Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/preset-plugin-proposal-class-properties' from '/Users/victorkasap/Desktop/localhost/_react_webpack_x_o'...

С таким комментарием

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation...

Нужно выполнить установку плагина для babel

npm install --save-dev @babel/plugin-proposal-class-properties

А в файле .babelrc внести изменения

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ]
}

Ссылка на git моего проекта

Все 🙃