Я тут занялся изучением 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 моего проекта
Все 🙃