Как покорить Webpack 4 и создать сладкое приложение React

kak pokorit webpack 4 i sozdat sladkoe prilozhenie react

Эта статья устарела с новым выпуском для babel, пожалуйста, посмотрите обновленную статью «Как объединить Webpack 4 и Babel 7, чтобы создать фантастическое приложение React», последнее обновление 13 октября 2018 г.

В этой статье я расскажу, как настроить приложение React с помощью Webpack 4. К концу этого учебника вы узнаете, как горячо перезагружать приложение каждый раз, когда вы нажимаете ctrl + s в избранном редакторе.

Я использую код Visual Studio (VS Code) и мне это нравится. Он легок, гибок, а лучше всего то, что он бесплатный. Я люблю бесплатно. Если вы не пробовали, попробуйте.

Наша цель

Наша цель этого учебника – создать приложение React с некоторыми интересными функциями, такими как async/await. Я не буду использовать react-router версии 4 в этом учебнике, потому что я в основном хочу сосредоточиться на том, как играть с Webpack.

Итак, к концу этой статьи вы будете хорошо уметь:

  • Настройка среды разработки с горячей перезагрузкой с помощью webpack-dev-server
  • Добавление поддержки SCSS и HTML в ваш код с помощью webpack
  • Добавлена ​​поддержка таких функций, как try/catch, async/await и оператор rest
  • Создание производственной сборки — оптимизированной и готовой к развертыванию
  • Настройка различных сред в вашем коде, таких как сцена, демонстрация и производство

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

Среда развития

Сделайте папку

Создайте папку под названием tutorial в вашем каталоге.

Создайте package.json

Откройте свой терминал и перейдите к tutorial папку.

Тип:

npm init -y

Это создаст a package.json файл в вашем tutorial папку.

Файл будет выглядеть примерно так:

1*wZFOOk5M8Hm-Jal__d_tzA
Вот так сначала будет смотреться ваш файл package.json. Я использую VS Code для целей этого учебника

Создайте файл index.js

Я создаю папку под названием src в моем tutorial папку.

В src папку, я создаю файл под названием index.js.

1*Xf-2jlOilNxVpftvnh8ltg
и да, я буду часто использовать цитаты из Звездного пути во время этого учебника, потому что ЭТО ПРИЗРАВИТЕЛЬНО 😀

Соедините код

Я знаю, что это не так много, но потерпите. Очень скоро все станет интересно.

Теперь, чтобы объединить наш код, нам нужно настроить некоторые конфигурации, чтобы Webpack мог знать, откуда соединить код. Для этого нам необходимо установить некоторые зависимости.

Так что начнем с введения:

npm i --save-dev webpack webpack-cli webpack-dev-server @babel/core @babel/preset-env @babel/preset-react @babel/preset-stage-2 babel-loader@^8.0.0-beta

ЭТО ДА! Я знаю, что это было много зависимостей. Давайте вспомним, зачем они нам были нужны.

webpack: нам необходим Webpack, чтобы объединить наш код.

webpack-cli: мы будем использовать некоторые функции CLI для Webpack, чтобы облегчить нашу жизнь при написании некоторых скриптов.

webpack-dev-server: я создаю сервер с помощью пакета webpack-dev-server. Это предназначено только для использования в среде разработки, а не для производства. Это означает, что при разработке и работе над своим кодом мне не нужен отдельный сервер, как Node.js.

@babel/preset-env: этот пакет ведет себя точно так же, как @babel/preset-latest (или @babel/preset-es2015, @babel/preset-es2016 и @babel/preset-es2017 вместе). Круто, верно?

@babel/preset-react: Название пакета звучит понятно – это придаст поддержку реакции, пока мы собираем наш код.

@babel/preset-stage-2: Это придаст функцию этапу 2 предложения Ecma TC39. Детальнее об этом можно прочитать здесь.

@babel/loader: это зависимость от Webpack. Это позволяет транспилировать Babel с помощью Webpack.

@babel/core: Это зависимость для @babel/loader.

Итак, теперь вы немного знаете, что мы установили и почему.

Ваш package.json файл должен выглядеть примерно так:

1*zABxZp43O89ynHf2Goesgg
Вот как сейчас должен смотреться ваш файл package.json.

Создайте файл Babel

Нам также нужно добавить новый файл под названием .babelrc , давайте создадим и его.

В каталоге основной папки создайте файл .babelrc и последующий фрагмент кода. Это поможет Webpack при объединении вашего кода и преобразовании тех кодов Sassy, ​​которые мы напишем.

Настройте Webpack 4

Ладно, скучная часть выполнена. Давайте перейдем к основной части этого руководства: настройка Webpack 4.

Цитата из Звездного пути:

Он ставит мне задачу. Он Задача я; и я буду иметь его. Я буду преследовать его вокруг месяцев Нибии, вокруг водоворота Антареса и вокруг Гибели. пламя перед тем, как я отдам его.

Давайте создадим новую папку под названием config и внутри этой папки создадим файл с ним webpack.base.config.js.

Почему я называю этот файл .base потому что он содержит все общие функции, которые мы будем использовать в своей разработке и различных производственных средах. Изменения в этом файле будут отображаться во всех средах. Опять же, если это бессмысленно, ребята, потерпите еще пару минут. Это станет смысл.

Не дожидаясь дальше, в вашем config/webpack.base.config.js файл напишите эти строки кода:

The module.rules определить набор правил, которые Webpack будет применять для определенных расширений файлов.

В нашем rules массив, мы определяем a test который сообщает Webpack, какое расширение использовать. Здесь я говорю Webpack применять определенное правило только к .js файлы на основе.

Дальше идет exclude. Во время комплектования я не хочу, чтобы Webpack транспилировал все. Это будет очень медленно, особенно, если я включаю свои node_modules папку тоже.

Поэтому я исключаю это с помощью exclude свойство в наборе правил. Последним, самым важным, является use.loader собственность. Здесь я даю ему значение babel-loader. Что делает babel-loader, так это использует наши определенные пресеты, которые мы определили в нашем .babelrc файл, чтобы перенести все файлы с помощью a .js расширение.

Пока все хорошо, да? Мы на полпути…

1*9BpWHDblN_zsH-9ri_SpHA
Даже профессор Снейп аплодирует вам. Прекрасная работа, ребята, мы почти на месте.

Еще одна вещь: Webpack 4 устанавливает файл src папку как точку входа по умолчанию и dist папку как исходную точку по умолчанию пакетного результата. Круто, верно?

Зайдите в свой tutorial папку и запустите этот скрипт. Это объединит весь ваш код и запустит этот код в браузере:

Adeel@Frodo MINGW64 ~/Desktop/article/tutorial$ node_modules/.bin/webpack-dev-server --mode development --config config/webpack.base.config.js --open --hot --history-api-fallback

Основой этого сценария является то, что он совмещает весь наш код в файле src каталог и запустите его в браузере по этому адресу:

http://localhost:8080/
1*hw2Qx290aHjl2nOeJob6Hw
Хм! Это другое. Это дает ошибку: Cannot GET /

HTML

Поэтому когда мы запустили скрипт, он собрался и открыл браузер. Теперь у него был код, который мы написали в нашем index.js файла, но в нем не было файла .html, в котором он мог бы его запустить.

Нам нужно добавить плагин html-webpack-plugin внутрь нашего webpack.base.config.js файл, и an index.html файл в нашем src каталог.

Сначала установите зависимость для транспиляции HTML с помощью Webpack:

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

Ваш package.json файл должен выглядеть так:

Теперь давайте добавим файл HTML в наш src каталог и назовите его index.html:

Теперь каталог нашего проекта должен выглядеть так:

1*BjLpopHXvTvhPr77imROIQ
Наш каталог проекта должен выглядеть примерно так

Пока мы на этом, давайте добавим это html-webpack-plugin в нашем webpack.base.config.js файл.

Мы добавили что-то новое к нашему файлу конфигурации webpack — вы заметили? Я просто балуюсь с тобой. Я знаю, что вы сделали.

1*lnDyP4-9zwP7oVJ0DnoLsg
Молодцы, мы почти кончили.

Что теперь делает этот плагин? Ну это очень просто. Проще говоря, плагины добавляют возможности к вашему Webpack. Подробнее о них можно прочесть здесь.

Теперь я добавил только этот плагин под названием html-webpack-plugin. Цель этого плагина очень проста: он создает HTML-файлы, чтобы обслуживать ваши пакетные файлы.

Ладно, давайте запустим этот скрипт еще раз (скрестив пальцы). «Надеюсь, на этот раз не будет ошибок», — сказал один раз каждый разработчик.

Adeel@Frodo MINGW64 ~/Desktop/article/tutorial$ node_modules/.bin/webpack-dev-server --mode development --config config/webpack.base.config.js --open --hot --history-api-fallback

Это компилирует и откроет браузер в доступном порту по умолчанию. мой:

http://localhost:8080/
1*Fq9Cg3TFY-fUi1tjJkCtEA
Я просто щелкнул ctrl+shift+i это открыл элемент проверки в моем браузере Chrome

Синяя часть: Синяя часть – это место, где я вставил свои мета-теги и определил название программы.

Желтая часть: Желтая выделенная часть – это жестко закодированная часть, которую мы написали в нашем index.html файл. Именно здесь будет находиться наше будущее приложение React.

Красная часть: Часть, которую я подчеркнул красным, наиболее интересна. Мы никогда не писали этого в наш файл index.html, и откуда это взялось?

Webpack очень умен. Он взял этот файл в ваш index.js хорошо объединил все это и аккуратно добавил в файл по имени main.js . Затем ввели его в нашу index.html файл. Супер круто!

Добавьте React

Давайте добавим React и приступим к вечеринке. Для этого нам необходимо установить некоторые зависимости.

Начнем с:

npm i react react-dom --save

Теперь зайдите в свой index.js файл и напишите:

Давайте снова запустим этот скрипт:

Adeel@Frodo MINGW64 ~/Desktop/article/tutorial$ node_modules/.bin/webpack-dev-server --mode development --config config/webpack.base.config.js --open --hot --history-api-fallback

Это компилирует и откроет ваш браузер в порту по умолчанию. мой:

http://localhost:8080/

Ого вы видели, что открылось в вашем браузере? Да! Ты сделал! Ваша первая программа React, настроенная на Webpack.

Сейчас еще много дел. Но человек, человек. Хорошая работа!

1*ghb2bSQb0lxi_zQY1L7L3A
Это наше приложение для реакции, которое работает Yayyyy! 🙂

Теперь вот самое интересное. Зайдите в свой index.js файл и измените название на любое по вашему выбору. Ударить ctrl + s и проверьте свой браузер. Он автоматически обновлял ваше содержимое.

Круто, верно?

Давайте подытожим

Мы добавили среду разработки. Мы добавили горячую перезагрузку модулей. Мы добавили поддержку для .js файлы с кодом React. В следующем разделе мы добавим поддержку SCSS в наш Webpack.

SCSS

Для поддержки SCSS нам нужно добавить еще несколько зависимостей в наш package.json file.

Установите следующие пакеты:

npm i --save-dev style-loader css-loader sass-loader node-sass extract-text-webpack-plugin@^4.0.0-beta.0

sass-loader: Этот плагин поможет нам скомпилировать SCSS в CSS.

node-sass: Sass-loader требовал node-sass в качестве одноранговой зависимости.

css-loader: загрузчик CSS интерпретирует @import и url() люблю import/require() и решит их.

style-loader: добавляет CSS в DOM путем ввода тега стиля.

extract-text-webpack-plugin: он перемещает все необходимое .css модулей в отдельный файл CSS

Следовательно, ваши стили больше не встроены в пакет JavaScript, а находятся в отдельном файле CSS (styles.css). Если общий объем таблицы стилей велик, это будет быстрее, поскольку пакет CSS загружается параллельно пакету JavaScript.

Теперь, когда установлены наши зависимости, давайте внесем некоторые изменения в наш файл конфигурации Webpack.

Давайте поначалу разберемся, что мы тут сделали. В нашем module.rules мы добавили новое правило. Это правило применяет определенную группу ко всем .scss файлы. Я надеюсь, что это имело смысл. Внутри нашего use , мы говорим ему извлечь некоторую информацию.

Давайте немного глубже, и я попытаюсь сделать это попроще.

{ fallback: "style-loader", use: "css-loader!sass-loader" }

Попытайтесь прочитать этот фрагмент кода снизу вверх.

Получите весь код SASS – .scss – с помощью sass-loader а затем конвертировать его в код CSS с помощью css-loader. Затем возьмите весь этот код CSS и введите его в нашу DOM с помощью тэга