Настройка React + Webpack 4 + Babel 7 с нуля

На прошлой неделе я изучал Webpack 4 и create-react-app. Моей целью было создать простую конфигурацию, которую затем можно было бы развить. Понять Webpack было нелегко. Но благодаря этому руководству «» я могу понять нули и единицы Webpack.

(Примечание: настройка My Webpack находится в конце сообщения.)

В последнее время я изучаю React, и я использовал create-react-app, чтобы легко создавать свои проекты React с минимальными усилиями и настройками. Это отличные инструменты, если вы хотите просто сосредоточиться на React и позволить им позаботиться о конфигурации, но я не верю, что это способ делать что-то, если вы действительно хотите чему-то научиться.

Наверное, нет, поэтому ты здесь. Итак, приступим :)

Настройка Webpack и каталога

Точки входа и выхода

Webpack 4 имеет точку входа по умолчанию index.js в папке src. и выходной каталог по умолчанию для папки dist

e.g.

module.exports = {
  entry: "./src/app.js", //you can define  your own entry point
  module: {
   ...
  }
}

Вы также можете указать выходной файл следующим образом:

const path = require('path')
module.exports = {
  entry: "./src/app.js",
  output: {
    path: path.resolve(‘dist’),
    filename: ‘bundled.js’
  },
  module: {
    ...
  }
}

Вы можете опустить запись и вывод в файле конфигурации webpack 4, и он примет значение по умолчанию.

Как будет выглядеть наш Справочник?

mkdir -p new-react-app/src/Containers
cd new-react-app

(Примечание: флаг -p автоматически создает для вас дочерний каталог, не вызывая ошибки)

Начнем с создания package.json:

npm init -y

Это автоматически создаст для вас файл package.json в корневом каталоге.

Затем нам нужно установить сборщик модулей, то есть webpack, webpack-dev-server и webpack-cli, чтобы использовать webpack из командной строки в качестве зависимости разработчика:

npm i webpack webpack-dev-server webpack-cli --save-dev

webpack-dev-server используется для перезагрузки в реальном времени и доступа к ресурсам в памяти (т. е. сгенерированным JS-пакетам). Это означает, что после закрытия сервера все файлы исчезнут

Создайте файл index.js внутри папки src и напишите следующие строки:

console.log('Boilerplate guide');

Теперь отредактируйте свой package.json с помощью следующих скриптов:

{
"name": "react-mini-boilerplate",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
  "start": " webpack-dev-server --open --mode development --hot",
  "build": " webpack --mode production"
 },
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
  "webpack": "^4.19.1",
  "webpack-cli": "^3.1.1",
  "webpack-dev-server": "^3.1.8"
 }
}

- open: запускает сборку для разработки по адресу http: // localhost: 8080 в браузере.
- режим: задает среду, т. е. разработка или производство.
- горячий: используется для перезагрузки веб-страницы в реальном времени.

Теперь запустите:

npm run build

Это автоматически создаст папку dist, содержащую main.js, которая представляет собой свернутую сборку для вашего приложения.

Настройка приложения React

Для React нам нужны пакеты babel 7, которые будут отвечать за преобразование нашего кода ES6 в код ES5, поскольку код ES6 не интерпретируется большей частью браузера, например Интернетом. Проводник.

Но сначала давайте сохраним react и react-dom как зависимости от нашего модуля:

npm i react react-dom --save

Затем настройте @ babel / core, @ babel / preset-env, @ babel / preset-react и babel- загрузчик:

@ babel / core: преобразование кода ES6 в код JavaScript ES5.
babel-loader: помощник Webpack для преобразования ваших зависимостей JavaScript с помощью Babel, например, когда вы импортируете компонент в другой компонент.
@ babel / preset-env: определяет, какие плагины использовать и полифиллы (обеспечивают современные функции в старых браузерах, которые их не поддерживают).
@ babel / preset-react: предустановка Babel превращает код JSX в функции.

npm i @babel/core @babel/preset-env @babel/preset-react babel-loader 
--save

Давайте создадим наш webpack.config.js. Поместите эти строки в свой файл конфигурации :

Здесь optimisation {nodeEnv: argv.mode} или вы можете просто написать mode: argv.mode - это новинка в webpack4, которая сообщает webpack работать в режиме Dev или Prod. argv.mode принимает значение из команды скриптов webpack, которую мы установили в package.json.

Мы установили правила для babel-loader. Теперь нам нужно указать файл .babelrc, чтобы загрузчик Babel был внимателен.

Наш первый компонент

Теперь внутри каталога Контейнеры создайте файлы App.js и App.scss и добавьте к нему фиктивный компонент.

Затем измените свой файл index.js на это:

Теперь создайте index.html в папке src, чтобы добавить наш созданный элемент с идентификатором index. Здесь будет отображаться наш основной компонент реакции :)

Далее мы установим html-webpack-plugin. Этот плагин создает HTML-файл внутри папки dist с <script> tag, который содержит наш сгенерированный пакет main.js

npm i html-webpack-plugin --save-dev

Значение, которое я даю ключу template, - это то место, где я ищу свой HTML-файл. Значение имени файла - это имя уменьшенного HTML-кода, который будет сгенерирован в папке dist.

Если вы сейчас запустите npm run build , вы увидите, что в папке dist создается файл index.html.

Теперь дважды щелкните index.html, вы должны увидеть Hello React в своем браузере.

(Примечание: Это ваша производственная сборка)

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

"scripts": {
  "start": " webpack-dev-server --open --mode development --hot",
  "build": " webpack --mode production"
 }

Если вы сейчас запустите npm run start, вы должны увидеть, что localhost: 8080 открывается в вашем браузере по умолчанию - для этого нужен флаг —-open. Теперь каждый раз, когда вы вносите изменения, страница будет обновляться.

Теперь давайте добавим стили к нашим компонентам:

Добавление модулей CSS

Мы добавим style-loader, css-loader и sass-loader в наш package.json.

npm i style-loader css-loader sass-loader node-sass --save

sass - загрузчик требует webpack в качестве peerDependency и требует, чтобы вы установили либо Node Sass, либо Dart Sass по своему усмотрению. Это позволяет вам контролировать версии всех ваших зависимостей и выбирать, какую реализацию Sass использовать (по умолчанию - Node Sass).

Важен порядок, в котором происходит преобразование:

sass-loader: преобразует файлы Sass в CSS.
css-loader: этот загрузчик знает, как «требовать» файлы CSS. Он добавляет новый модуль для каждого необходимого файла CSS, содержащего код CSS в виде строки.
style-loader: вставьте разрешенный код в нашу DOM, добавив тег ‹style› в элемент ‹head› нашего HTML.

Мы также можем сделать CSS модульным, что означает, что мы можем ограничить область действия файла CSS только определенным компонентом реакции. Это необходимо, потому что все CSS, которые мы пишем, по умолчанию являются глобальными, так что есть шанс переопределить стиль. Для этого нам нужно передать дополнительные параметры в нашем файле webpack.config.js.

Вот наш webpack.config.js:

Чтобы включить модули CSS, нам нужно установить для параметра module css-loader значение true. Параметр importLoaders настраивает, сколько загрузчиков должно быть применено до css-loader. Например, sass-loader должно было стоять перед css-loader.

localIdentName позволяет настроить сгенерированную идентификацию.

[name] примет имя вашего компонента
[local] - это имя вашего класса / идентификатор
[hash: base64: 5] - это случайно сгенерированный пятизначный хэш base64, который будет уникальным в CSS каждого компонента.

загрузчик стилей

Этот загрузчик знает, как использовать модули CSS: для каждого модуля CSS он вставляет элемент стиля на страницу, где вы загружаете пакет JavaScript.

Это полезно для сред разработки или для проектов с небольшим количеством CSS, но этого не хватает почти для всех веб-приложений в производственной среде.

MiniCssExtractPlugin

Это плагин веб-пакета, который удаляет встроенный контент из пакета javascript и записывает его в отдельный файл. Вы можете использовать его в производственных пакетах, чтобы удалить модули CSS из пакета JavaScript и записать код CSS в отдельный файл .css.

Используя следующую конфигурацию веб-пакета:

Отредактируйте файл App.scss:

Вам нужно будет импортировать файл CSS в компонент приложения следующим образом:

import classes from "./App.css"

Теперь запустите npm run build , это запустит вашу производственную сборку и сгенерирует для вас файл main. [Hash] .css в каталоге dist (с помощью MiniCssExtractPlugin)