Автор оригинала: Adeel Imran.
В этой статье я пройду, как настроить приложение React, используя WebPack 4. К концу этого руководства вы узнаете о том, как горячо перезагрузить приложение каждый раз, когда вы нажимаете Ctrl + S В вашем редакторе выбора.
Я использую Визуальный студийный код (VS код), и я люблю это. Это легкий вес, гибкий, а лучшая часть – это бесплатно. Я люблю свободно. Если вы еще не пробовали, попробуйте.
Наша цель
Наша цель для этого учебника состоит в том, чтобы создать Реагировать Приложение, с некоторыми крутыми функциями, такими как async/ждут. Я не буду пользоваться React-Router Версия 4 В этом руководстве, потому что я в основном хочу сосредоточиться на том, как играть с WebPack.
Так что к концу этой статьи вы будете хороши в:
- Настройка среды разработки, с горячей перезагрузкой с использованием webpack-dev-сервер
- Добавление SCSS и HTML-поддержки в вашем коде с помощью WebPack
- Добавление поддержки для функций, таких как TRY/CALL, ASYNC/en ждут оператора отдыха
- Создание производственной сборки – оптимизирована и готова к развертыванию
- Настройка различных сред в вашем коде, как этап, демо и производство
Ребята, я говорю вам, что если WebPack кажется немного сильно, после этого это больше не будет так.
Среда разработки
Сделать папку
Сделать папку под названием Учебное пособие в вашем каталоге.
Создать Package.json.
Откройте свой терминал и войдите в Учебное пособие папка.
Тип:
npm init -y
Это создаст Package.json Файл в вашем Учебное пособие папка.
Файл будет выглядеть что-то подобное:
Создайте файл index.js
Я создаю папку под названием SRC В моем Учебное пособие папка.
В SRC Папка, я создадим файл под названием index.js Отказ
Пучок код
Я знаю, что это не так много, но нести со мной. Все скоро станет интересным.
Теперь для того, чтобы подключить наш код, нам нужно настроить некоторые конфигурации, чтобы 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/Predet-Neighle (или @ 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 Файл должен выглядеть что-то вроде этого:
Создать файл Babel
Нам также нужно добавить новый файл под названием .babelrc , Так что давайте создадим это тоже.
В вашей главной папке создайте файл .babelrc и следующий фрагмент кода. Это поможет WebPack при объединении вашего кода и преобразования этих сасси, которые мы напишем.
Настройте WebPack 4
Хорошо, так что скучная часть была сделана. Давайте переместимся на основную часть этого руководства: настроить WebPack 4.
Цитировать из Star Trek:
Итак, давайте создадим новую папку под названием config . и внутри этой папки давайте создадим файл под названием WebPack.base.config.js Отказ
Причина, по которой я называю этот файл .база Это потому, что это содержит все общие черты, которые мы будем использовать в нашем развитии и различных производственных условиях. Изменения в этом одном файле будут отражены во всех средах. Опять же, если это не имеет смысла сейчас, ребята, несут со мной еще пару минут. Это начнет иметь смысл.
Без дальнейшего ожидания, в вашем config/webpack.base.config.js Файл Написать эти строки кода:
Module.rules Определите набор правил, которые WebPack будет применяться к определенным расширениям файла.
В нашем правила Массив, мы определяем Тест Это говорит WebPack, какое расширение использовать. Здесь я говорю WebPack применить определенное правило только для .js на основе файлов.
Далее приходит Исключить Отказ В то время как объединение, я не хочу, чтобы WebPack трансировать все. Это станет очень медленным, особенно когда я включаю в себя мой node_modules папка тоже.
Так что я исключу его, используя Исключить Свойство в наборе правила. Последний, который является самым важным, это USE.Loader имущество. Здесь я даю ему ценность Babel-Loader Отказ Что делает Babel-Loader, использует наши определенные пресеты, которые мы определены в нашем .babelrc Файл для транпила всех файлов с .js расширение.
Пока так хорошо, да? Мы больше, чем на полпути …
Также еще одна вещь: WebPack 4 устанавливает SRC Папка как точка входа по умолчанию и Dist Папка в качестве выходной точки по умолчанию вашего зарегистрированного результата. Круто, верно?
Идите в свой Учебное пособие папка и запустить этот скрипт. Это заблокирует весь ваш код и запустит этот код в браузере:
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/
HTML
Поэтому, когда мы запустили скрипт, он скомпилировал и открыл браузер. Теперь у него был код, который мы написали в нашем index.js Файл, но у него не было файла .html, в котором он мог его запустить.
Нам нужно добавить HTML-Webpack-плагин внутри нашего WebPack.base.config.js Файл и index.html Файл в нашем SRC каталог.
Сначала установите зависимость для транспортировки HTML с помощью WebPack:
npm i --save-dev html-webpack-plugin
Ваш Package.json Файл должен выглядеть так:
Теперь давайте добавим HTML-файл в нашем SRC каталог и назовите его index.html :
Наш справочник проекта должен выглядеть так:
Пока мы на это, давайте добавим это html-webpack-plugin в нашем WebPack.base.config.js файл.
Таким образом, мы добавили что-то новое в наш файл Config WebPack – вы заметили? Я просто возиюсь с тобой. Я знаю, что ты сделал.
Теперь, что делает этот плагин? Ну, это очень просто. Плагины, надевайте просто, добавьте способности на ваш веб-пакет. Вы можете прочитать больше о них здесь Отказ
Теперь я добавил только этот плагин под названием html-webpack-plugin Отказ Цель этого плагина очень проста: он создает HTML-файлы для обслуживания файлов BUNLE (S).
Хорошо, так что давайте снова запустим этот скрипт (скрещенные пальцами). «Я надеюсь, что на этот раз нет ошибок», – сказал каждый разработчик.
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/
Синяя часть: Синяя часть просто там, где я положил в мою мета теги и определил заголовок для приложения.
Желтая часть: Желтая часть выделена жесткая кодированная часть, которую мы написали в наших index.html файл. Именно здесь наше будущее приложение React будет проживать.
Красная часть: Часть, где я подчеркнул красную, является самым интересной частью. Мы никогда не писали это в нашем файле index.html, так откуда он взялся?
WebPack очень умный. Это заняло этот файл в вашем index.js , в комплекте все это хорошо, и добавил его все аккуратно в файле под названием main.js Отказ Тогда он ввел его в нашу index.html файл. Очень круто!
Добавить реакцию
Давайте добавим отреагируйте и получите вечеринку. Для этого нам нужно установить некоторые зависимости.
Давайте начнем с:
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/
Вау, вы видели, что открылось в вашем браузере? Да! Ты сделал! Ваш первый WebPack Confied App App.
Теперь есть еще множество вещей. Но человек о человек. Молодец!
Теперь вот веселая часть. Иди в свой index.js Файл и измените название на что-нибудь по вашему выбору. Хит Ctrl + S И проверьте свой браузер. Он автоматически обновляет ваш контент.
Круто, верно?
Давайте повторимся
Мы добавили среду разработки. Мы добавили перегрузку горячего модуля. Мы добавили поддержку для .js Файлы с React Code. В следующей части мы добавим поддержку SCSS в нашем WebPack.
SCSS.
Для поддержки SCSS нам нужно добавить еще несколько зависимостей в наших Package.json Файл .
Установите следующие пакеты:
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.
Узел-сасс : Sass-Loader требует узел SASS в качестве одноранговой зависимости.
CSS-Loader : Погрузчик CSS интерпретирует @Импортировать и URL () как Импорт/требуется () и разрешит их.
Стиль-погрузчик : Добавляет CSS в DOM путем впрыскивания тега стиля.
Экстракт-текстовый веб-плагин : Это перемещает все необходимое .css Модули в отдельный файл CSS.
Таким образом, ваши стили больше не включены в пакет JavaScript, но в отдельном файле CSS ( styles.csss ). Если ваша общая тома таблицы стилей большой, это будет быстрее, потому что пучок CSS загружается параллельно на пакете JavaScript.
Теперь, когда наши зависимости были установлены, давайте внесем некоторые изменения в наш файл конфигурации WebPack.
Давайте понять, что мы здесь сделали здесь. В нашем Module.rules Мы добавили новое правило. То, что это правило применяет некоторые пакеты всем .scss файлы. Я надеюсь, что именно имеет смысл. Внутри нашего использовать , Мы говорим это извлечь некоторую информацию.
Давайте немного глубже, и я постараюсь сделать это так же просто, как я могу.
{ fallback: "style-loader", use: "css-loader!sass-loader" }Попробуйте прочитать этот кусок кода из нижней части.
Получить весь код SASS – .scss – Использование Sass-Loader а затем преобразовать его в код CSS, используя CSS-погрузчик. Затем возьмите все это CSS-код и введите его в наш дом с тегом <Стиль> by Использование стиля- погрузчик.
Теперь весь этот объект окружен:
use: ExtractTextPlugin.extract({ ... })Это ExtractTextPlugin.extract ({}) Возьмем весь наш CSS-код, который должен был вводиться в нашем DOM и объединить весь код CSS и соедините его в одном файле под названием still.css Отказ
Огромное преимущество этого подхода заключается в том, что если наш общий объем листа стилей большой при загрузке его из браузера он загрузит его параллельно с нашим кодом JavaScript. Это сделает наш сайт быстрее.
Во второй части мы должны были добавить новую запись в нашу плагины Массив, который был:
new ExtractTextPlugin('style.css')Это в основном говорит плагину объединить весь наш код CSS и поместите его в файл под названием still.css Отказ
Давайте создадим новый файл под названием styles.cscss В нашей корневой папке и играйте с каким-то стилем.
Теперь в вашем index.js Файл Добавить styles.cscss Отказ WebPack позволяет им импортировать CSS в JavaScript. Это круто, я знаю.
В вашем коде просто добавьте эту строку:
import './styles.scss';
Теперь запустите этот скрипт снова и проверьте свой браузер:
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
Это последний раз, когда мы пишем это вручную. Придумать, мы сделаем сценарий. И да, я помню – я до сих пор не объяснил, что делает этот скрипт. Я буду. Я обещаю.
В любом случае, проверьте свой браузер … Хорошо, круто.
Сделать скрипт
Давайте напишем немного сценария и сделать нашу жизнь немного легче. Причина, по которой я продолжал просить вас написать этот скрипт снова и снова, так что вы на самом деле запомнили его, а не просто скопируйте и вставляете его в Интернете.
Давайте прыгнем в нашу Package.json файл.
В вашем Сценарии Раздел, добавьте следующий код:
Теперь в вашем терминале введите:
Adeel@Frodo MINGW64 ~/Desktop/article/tutorial$ npm run start:dev
Примечание : В сценарии нам больше не нужно писать это:
node_modules/.bin/webpack
Более подробную информацию о в WebPack-Dev-Server Usage Docs здесь Отказ
Сценарий для Старт: Dev выглядит что-то подобное сейчас:
webpack-dev-server --mode development --config config/webpack.base.config.js --open --hot --history-api-fallback
Давайте сломаемся, что делает этот скрипт:
WebPack-Dev-Server – Mode Development
Флаг - Развитие Mode Устанавливает сборку, которая наиболее оптимизирована для целей развития. Он имеет быструю инкрементную компиляцию для цикла разработки и полезных сообщений об ошибках во время выполнения.
Вы можете прочитать больше о режимах в этой удивительной статье: WebPack 4: Режим и оптимизация Отказ
Флаг - Config Config/webpack.base.config.js Рассказывает WebPack, где вся наша конфигурация размещена для нашего пакета WebPack.
Флаг --Open рассказывает WebPack-Dev-Server Чтобы открыть браузер.
Флаг --hot рассказывает WebPack-Dev-Server Чтобы включить функцию замены горячего модуля WebPack. Это обновляет браузер каждый раз, когда вы попадаете Ctrl + S.
Флаг - -History-API-Foxback рассказывает WebPack-Dev-Server в отступление к index.html В случае, если запрошенный ресурс не найден. Вы можете прочитать больше о История-API-Foxback здесь.
Производственная среда
Теперь, когда мы закончили с нашей средой разработки, давайте грязные руки и получим наш код для производства.
Давайте создадим новый файл WebPack.Opt.config.js. . Этот файл будет содержать все наши оптимизации производства, которые нам понадобятся.
План состоит в том, чтобы сделать что-то вроде слиться нашего WebPack.base.config.js Файл с WebPack.Opt.config.js Файл для создания конфигурации производства для нашего приложения для одной страницы.
Так что давайте начнем. В вашем config . Каталог создать новый файл под названием WebPack.Opt.config.js Отказ Вып короткая для оптимизации. Если кто-то может придумать название прохладшего, дайте мне знать.
Нам нужно установить некоторые зависимости, чтобы помочь с нашими оптимизациями:
$ npm i --save-dev optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin
Хотя - Производство подходит с самими красивыми классными оптимизациями. Вы можете прочитать больше об этом здесь Отказ Но я все равно хотел бы добавить еще пару.
Код выглядит следующим образом:
Давайте повторимся, что мы здесь сделали. Я добавил в новые модули в dev-зависимости.
uglifyjs-webpack-plugin : Как звучит звучит имя, это будет усовершенствовать и минимизировать весь наш код, чтобы уменьшить размер пунса.
Оптимизация-CSS-Assets-WebPack-Plugin : Этот плагин минимизирует и оптимизирует ваш код CSS.
Так что хорошо все – мы почти закончили.
Помните, когда я говорил о том, как нам не придется повторять наш код снова и снова? Один для развития, другой для производства … И даже не заставляют меня начать на управлении этими средами, демонстрацией и жить! Ну, это заканчивается сегодня. Нет больше повторений кода.
Я представляю вам нашего Спасителя, Белый рыцарь WebPack Merge Отказ Этот плагин удивительна, как звуки имени.
Что это сделает, это объединить нашу конфигурацию для .base и .Opt файлы смарт. Это обеспечивает слияние Функция, которая объединяет массивы и объединяет объекты для создания нового объекта.
Так что без дальнейшего ADO давайте также установим этот удивительный плагин:
$ npm i --save-dev webpack-merge
Давайте создадим наш финал webpack.prod.config.js файл:
Мы проходим параметр нашей функции под названием Производственная конфискация и использовал env. . Вот как мы передаем информацию в WebPack через нашу CLI (я объясню, как мы сделаем это через минуту).
Я проезжаю что-то называемое Node_env Отказ Это ценность, в котором я скажу свой веб-пакет, что в какой среде я буду бегать – например, демонстрация, тест, жить или что угодно.
Далее, все, что я получаю в моем env. Node_env. Я установил в моем Process.env. Node_env. Использование WebPack встроенного плагина называется Офиниругин Отказ Нам просто нужно убедиться, что какое-либо значение, которое мы пропустим, всегда строгая.
Затем, в последней строке, мы делаем это:
module.exports = merge.smart(baseConfig, optimizationConfig, productionConfiguration);
Что происходит вот мы используем WebPack-Merge's Метод называется Умный Умного объединить все три наших конфигурации. Таким образом, мы не повторяем тот же код везде. Это крутая особенность.
Я помню время, прежде чем нашла этот плагин. Это было много беспорядок, делая то же самое во всех файлах конфигурации WebPack. Теперь это просто ветерок.
В любом случае, продвигается вперед, так как теперь наши конфигурации WebPack наконец сделаны. Давайте сделаем наш производительский скрипт сборки в нашем Package.json файл.
В разделе «Сценарии» добавьте следующие строки:
Я начну с Prestart: Prod команда:
"prestart:prod": "webpack --mode production --config config/webpack.prod.config.js --env.NODE_ENV=production --progress",
Мы нарушим эту команду вниз.
WebPack - Mode Production Отказ Как мы обсуждали ранее, при обсуждении Режим разработки Режим производства запускает некоторые действительно крутые процессы оптимизации в наших подключенных файлах (ых), чтобы сделать размер меньше.
Следующий флаг – --Config Config/webpack.prod.config.js . Это говорит WebPack, где находится наша производственная конфигурация в каталоге.
env Флаг указывает переменную среды, которую мы проходим через нашу WebPack-Cli Отказ Это идет так: --env. Nove_env = Production проходит объект в нашем webpack.prod.config.js с ключом Node_env который имеет значение под названием Производство Отказ
Вы можете пройти как можно больше переменных окружающей среды, как вы хотите, например --env. X = foo. . Тогда в вашей конфигурации вы получите эти значения так же, как вы получаете доступ к Node_env ценить.
Последний флаг – --Погесс Отказ Он просто рассказывает прогресс/статус пучка, как какой процент завершен в процентах, сделав в комплектных файлах в вашем Dist папка.
Быстрое напоминание
WebPack 4 по умолчанию устанавливает SRC Папка как точка входа по умолчанию и Dist Папка в качестве выходной точки по умолчанию вашего зарегистрированного результата. Круто, верно? Я знаю, что я повторяю это – я сказал вам ранее – но вот почему я сказал напоминание.
Вернуться к нашему учебнику
Мы обсуждали Prestart: Prod Сценарий, теперь мы поговорим о финальном сценарии под названием Начало: Prod Отказ
С NPM, в любое время, когда вы хотите запустить сценарии один за другим, вы их последовательность с преобразователь Команда посткоммян
Как мы сделали здесь:
$ prestart:prod
$ start:prod
Так что мы всегда будем запускать скрипт NPM запустить начало: prod Перед выполнением сценария называется NPM Run Prestart: Prod.
Давайте обсудим Начать: PROD.
$ node server => {This is equivalent to} => $ node server/index.jsДавайте создадим папку под названием Сервер Отказ Внутри папки создайте файл под названием index.js Отказ Но прежде чем мы сделаем это, нам нужно добавить одну последнюю зависимость.
Это будет экспресс, наш Back-End Node.js Framework:
npm i --save express
Давайте обсудим этот код, прежде чем мы продолжим дальше.
Мы создали наше приложение с Express () а затем создать статическую публичную папку под названием Dist Отказ Это одна и та же папка, созданная WebPack, когда мы запустим нашу команду производства.
Мы включаем наши маршруты Файл – мы создадим это через секунду – и установить маршруты Файл к / каталог.
Далее мы настроили порт. Если не предусмотрено для установки через CLI Node, мы используем порт 3000 Отказ После этого мы создаем HTTP-сервер и прослушайте этот сервер через порт. В самом последнем, мы консоль к нашему терминалу, что мы запуская сервер на этом определенном порту.
Давайте создадим наш последний файл под названием Маршруты/index.js :
Здесь мы проверяем, что все, что наступает пользователь, путь перенаправляет пользователь на dist/index.html где живет наше наложение реагирования.
Вот и все. Мы сделали.
Теперь иди в свой терминал и введите:
npm run start:prod
Это займет момент. Это покажет вам прогресс, пока он транкирует. После этого он придерживается сообщения, которое оно слушать порт 3000 Если никто не предоставлен.
Теперь перейдите в свой браузер http: localhost: 3000/ И ваша заявка жива.
Смотрите код на Github Отказ
Крик для моего хорошего друга Ахмед Аббаси Для того, чтобы помочь мне доказательство прочитать эту статью.
Вы можете следовать за мной на Twitter Я хотел бы поговорить и услышать вас, ребята.
Оригинал: “https://www.freecodecamp.org/news/how-to-conquer-webpack-4-and-build-a-sweet-react-app-236d721e6745/”