
Содержание статьи
В последние три недели я пытался создать программу React с нуля, чтобы понять настройки Webpack. Моя цель заключалась в том, чтобы настроить простую конфигурацию, которую можно было бы потом развивать. Было тяжело понять Webpack. Но благодаря этому учебнику Валентино Гальярди я получил много знаний.
То, что я планирую сделать, это создать функцию поиска с некоторыми ложными данными JSON (или подлинными). В этой публикации блога я расскажу о настройках своего проекта. В следующем я планирую показать, как настроить тестирование. Я также хотел бы добавить к этому серверу с помощью Node.js, но не уверен, будет ли это нужно для сферы моего проекта.
(Примечание: я предоставил настройки Webpack в конце этой публикации в блоге)
Без лишних слов, давайте приступим к настройке!
Сделать новый проект и компакт-диск в это:
mkdir react_searchcd react_search
Создать package.json файл:
npm init
Если вы хотите пропустить все вопросы, добавьте флажок -y:
npm init -y
Нам нужно установить webpack как зависимость от разработчика и webpack-cli чтобы вы могли использовать webpack в командной строке:
npm i webpack webpack-cli -D
- i: установить
- -D: — save-dev
Создать папка src с index.js и разместите такой код как пример:
console.log("hello");
Теперь добавьте такие сценарии к вашему package.json (выделено жирным шрифтом):
{
"name": "react_search",
"version": "1.0.0",
"description": "Search app using React",
"main": "index.js",
"scripts": {
"start": "webpack --mode development",
"build": "webpack --mode production"
}, "keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.0.1",
"webpack-cli": "^2.0.10"
}
}
Webpack 4 теперь имеет два режима, развития и производства где код минимизирован в последнем.
Убедитесь в этом сами, запустив:
npm run start
Это создаст a расст папка с main.js файл внутри (содержит ваш код src).

Если вы сейчас запустите:
npm run build
Следующий результат выглядит так:

Настройки React и Babel
Для работы с React нам нужно установить его вместе с Babel. Это приведет к транспиляции кода из ES6 на ES5, поскольку еще не все браузеры поддерживают ES6 (например, Internet Explorer).
установить реагировать и реагировать-дом как зависимость
npm i react react-dom -S
Затем установите babel-core, babel-loader, babel-preset-env и babel-preset-react как зависимость от разработчика:
npm i babel-core babel-loader babel-preset-env babel-preset-react -D
- babel-core: преобразует ваш код ES6 в ES5
- babel-loader: помощник Webpack для трансформации ваших зависимостей JavaScript (например, когда вы импортируете свои компоненты в другие компоненты) с помощью Babel
- babel-preset-env: Определяет, какие преобразования/плагины использовать и полизаполнение (обеспечивает современную функциональность в более старых браузерах, которые не поддерживают ее оригинально) на основе матрицы браузера, которую вы хотите поддерживать
- babel-preset-react: пресет Babel для всех плагинов React, например, превращение JSX в функции
Нам нужно создать a webpack.config.js файл, чтобы определить правила для нашего babel-loader.
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
Затем нам нужно создать отдельный файл под названием .babelrc чтобы предоставить параметры для babel-loader. Вы можете включить его в файл webpack.config.js, но я видел, что в большинстве проектов это разделено. Это обеспечивает более четкую читабельность, и его можно использовать другими инструментами, не связанными с webpack. Если вы утверждаете, что используете babel-loader в конфигурации webpack, он будет искать файл .babelrc, если он есть.
{
"presets": ["env", "react"]
}
Далее смените свой index.js файл для воспроизведения компонента:
import React from "react";
import ReactDOM from "react-dom";
const Index = () => {
return <div>Hello React!</div>;
};
ReactDOM.render(<Index />, document.getElementById("index"));
Нам также нужно будет создать index.html файл в src папку, куда мы можем добавить наш элемент раздела с идентификатором index
. Здесь мы визуализируем наш основной компонент react:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>React and Webpack4</title>
</head>
<body>
<section id="index"></section>
</body>
</html>
Теперь нам нужно установить html-webpack-плагин и используйте это в нашем файле конфигурации webpack. Этот плагин генерирует HTML-файл с введенным