В последние три недели я пытался создать программу 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-файл с введенным