Как создать приложение React с нуля с помощью WebPack 4

За последние три недели я пытался создать приложение React с царапин, чтобы понять настройку с помощью WebPack. Моя цель состояла в том, чтобы настроить простую конфигурацию, которая затем может быть выросла. Это была борьба, чтобы понять WebPack. Но благодаря этому Учебное пособие по Valentino Gagliardi, Я очень просвещен.

Что я планирую сделать, это сделать функциональность поиска с некоторыми фальшивыми данными JSON (или реальным). В этом посте в блоге я пройду через создание моего проекта. В следующем, я планирую показать, как настроить тестирование. Я также хотел бы добавить сервер к этому, используя Node.js, но не уверен, что имеет возможность этого проекта.

( Примечание : Я предоставил My WebPack Setup в конце этого поста в блоге)

Без дальнейшего ADO давайте настроим настроек!

Сделать новый проект и CD внутрь:

mkdir react_searchcd react_search

Создать package.json файл:

npm init

Если вы хотите пропустить все вопросы, добавьте флаг -Y:

npm init -y

Нам нужно установить WebPack как зависимость разработки и WebPack-Cli Так что вы можете использовать WebPack в командной строке:

npm i webpack webpack-cli -D

я: установить
-D: – сохранить- дев

Создать 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

Это создаст Dist папка с main.js Файл внутри (содержащий ваш код SRC).

Если вы сейчас запустите:

npm run build

Следующий вывод сейчас такой:

Настройка реагирования и бабела

Работать с реагированием, нам нужно установить его вместе с Babel. Это будет транспировать код от ES6 до ES5, как не все браузеры поддерживают ES6 (например, Internet Explorer).

Установить реагировать и React-Dom как зависимость

npm i react react-dom -S

-С: – спасти

Затем установите Babel-Core , Babel-Loader , Babel-Preset-Env и Babel-Preset-React как зависимость Dev:

npm i babel-core babel-loader babel-preset-env babel-preset-react -D

Babel-Core : Преобразует ваш код ES6 в ES5
Babel-Loader : WebPack Helper, чтобы преобразовать ваши зависимости JavaScript (например, при импорте ваших компонентов в другие компоненты) с Babel
Babel-Preset-Env : Определяет, какие преобразования/плагины в использовании и полифиллирования (предоставьте современную функциональность на более старых браузерах, которые не поддерживают его) на основе матрицы браузера, который вы хотите поддержать
Babel-Preset-React : Предустановка Babel для всех плагинов React React, например, поворота JSX в функции

Нам нужно создать 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 Hello React!;
};

ReactDOM.render(, document.getElementById("index"));

Нам также нужно будет создать index.html Файл в SRC Папка, где мы можем добавить наш раздел элемент с ID Индекс Отказ Это где мы визуализируем наш основной компонент реагирования:





  
  
  
  React and Webpack4

Теперь нам нужно установить html-webpack-plugin И используйте это в нашем файле конфигурации WebPack. Этот плагин генерирует HTML-файл с помощью Injected, пишет Th это отчет/индекс .html, и выделяет файл.

Установить html-webpack-plugin как зависимость Dev:

npm i html-webpack-plugin -D

Обновите конфигурацию WebPack так:

const HtmlWebPackPlugin = require("html-webpack-plugin");

const htmlPlugin = new HtmlWebPackPlugin({
  template: "./src/index.html",
  filename: "./index.html"
});

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
  plugins: [htmlPlugin]
};

Вы также можете ввести такой плагин:

plugins: [
    new HtmlWebPackPlugin({
    template: "./src/index.html",
    filename: "./index.html"
  });
]

Но я предпочитаю извлечь это в переменную, чтобы я мог видеть список плагинов, которые я использую.

Значение, которое я даю Шаблон Ключ в том, где я ищу свой HTML-файл. Значение имени файла – это имя заметного HTML, которое будет сгенерировано в папке Dist.

Если вы сейчас запустите NPM запустить начало Вы должны увидеть index.html Быть генерироваться в папке Dist.

Беги Откройте dist/index.html И вы должны увидеть «Привет реагировать» в вашем браузере.

Настройка WebPack-Dev-Server

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

Продолжайте и установите это как зависимость Dev

npm i webpack-dev-server -D

Затем измените свой Package.json Начать сценарии, как так (жирный):

{
  "name": "react_search",
  "version": "1.0.0",
  "description": "Search app using React",
  "main": "index.js",
  "scripts": {
  
  "start": "webpack-dev-server --mode development --open",    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "html-webpack-plugin": "^3.0.6",
    "webpack": "^4.1.1",
    "webpack-cli": "^2.0.10",
    "webpack-dev-server": "^3.1.0"
  }
}

Если вы сейчас запустите NPM запустить начало Вы должны увидеть localhost: 8080 Откройте в своем браузере по умолчанию – вот что --Open Флаг для. Теперь каждый раз, когда вы вносите изменения, он обновит страницу.

Вы также можете добавить --hot Флаг к вашему сценарию запуска NPM, который позволит вам перезагрузить только компонент, который вы поменяли вместо того, чтобы выполнять полную страницу перезагрузку. Это Замена горячего модуля Отказ

Настройка CSS.

Последняя часть включает настройку наших CSS. Поскольку мы будем импортировать файлы CSS в наши компоненты реагирования, нам нужно CSS-погрузчик модуль для их разрешения. Как только это решено, нам также нужен Стиль-погрузчик Чтобы ввести это в наше DOM – добавление тега

Оригинал: “https://www.freecodecamp.org/news/part-1-react-app-from-scratch-using-webpack-4-562b1d231e75/”

Настройка реагирования и бабела

Настройка WebPack-Dev-Server

Настройка CSS.

Читайте ещё по теме: