Главная » Статьи » Продолжительная разработка без нажатия Ctrl + R: как пользоваться Webpack 4

Продолжительная разработка без нажатия Ctrl + R: как пользоваться Webpack 4

Продолжительная разработка без нажатия Ctrl + R: как пользоваться Webpack 4

От автора: некоторое время назад, при создании большого количества приложений front-end после каждого внесённого изменения браузер необходимо было перезагружать. В то время это не казалось проблемой. Как говорится, необходимость — мать изобретений. Но как насчет того, чтобы нам не было нужно вручную перезагружать браузер, когда мы вносим изменения в наши приложения? Для этого нужно знать, как пользоваться webpack!!!!

webpack — это статический модуль, который пришел в разработку современных приложений для javascript. Это имеет смысл только потому, что необходимость вручную обновлять браузер каждый раз, когда в приложение внесено одно изменение, может сильно утомить.

Как работает webpack?

webpack принимает все модули в приложении (HTML, CSS, JS, Fonts) и постоянно строит график зависимостей, а затем помещает их в один или в несколько пакетов. Единственное небольшое предостережение — это конфигурация. Большинство людей уклоняются от webpack, потому что у них есть представление о том, что настраиваемый webpack для приложения является слишком сложной задачей, поэтому они скорее не станут его использовать. В выходящем webpack 4 (кодовое название) с минимальной конфигурацией необходимой для ускорения работы!

Что мы будем создавать

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

Зависимости

Прежде чем мы займемся разработкой, необходимо убедиться, что на наших локальных машинах установлены следующие зависимости:

У вас установлен Node

Установлен Node Package Manager

Чтобы подтвердить установку, выполните следующую команду на своем устройстве:

node --version npm --version

Создание приложения

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

mkdir weather-forecaster

Затем запускаем npm init

cd weather-forecaster npm init

Теперь, следующее, что нам нужно сделать, это добавить webpack в наш проект, для этого мы запускаем команду:

npm install webpack webpack-cli -D 

В настоящее время webpack имеет версию 4.1.1 , и мы будем говорить о конфигурациях в отношении именно этой версии

Создание необходимых файлов

Создайте каталог с именем src, который будет содержать необходимые нам исходные файлы.

mkdir src cd src touch index.js 

В index.js у нас есть следующее:

alert("It's going to rain today! Take your umbrella");

Использование webpack с начальными настройками конфигурации

В предыдущих версиях webpack нам нужно было создать файл webpack.config.js, чтобы указать entry point: график зависимости должен начинаться с output — где должен быть сохранен пакет результатов и заданное ему имя.

Дождитесь webpack 4….и вы можете работать с начальной конфигурации!!!

webpack автоматически принимает **./src/index.js** для точки входа в проект и автоматически выдаёт результат на **./dist/main.js** .Конечно, это может быть изменено в соответствии с вашими индивидуальными потребностями.

Чтобы специфицировать режим webpack в нашем package.json, мы добавляем следующее:

{ //... "scripts" : { // ... "dev": "webpack --mode development", "build": "webpack --mode production" } //... }

В приведенном выше примере мы добавляем сценарии запуска и указываем, работаем ли мы в режиме производства/разработки. Теперь, когда мы запускаем npm run dev, мы получаем результат, указанный ниже:

Результат также сохраняется в ./dist/main.js. Заметьте, мы ничего не настраивали…

Использование набора результатов в приложении

Теперь мы создаем файл index.html в корневом каталоге приложения и получаем следующее:

<!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>Weather Forecaster</title> </head> <body> <h1>Taking webpack for a Spin ....</h1> <script src="./dist/main.js"></script> </body> </html>

В нашем индексном файле выше мы включаем встроенный пакет, созданный webpack (см. строку 11). Теперь, когда мы запускаем его, то получаем следующее:

Добавление сервера webpack Dev. На этом этапе нам нужно запускать npm run dev каждый раз, когда webpack переустанавливает активы. Это не самый лучший способ сделать что-то. Поэтому дождёмся выхода webpack-dev-server .Развертывание webpack sever запустит окно браузера и будет обновлять окно всякий раз, когда будет произведено изменение файла.

Чтобы установить сервер разработки, выполните следующую команду:

npm install webpack-dev-server --save-dev

Сервер разработки webpack не предназначен для режима производства. Как только это будет сделано, нужно будет снова отредактировать package.json, чтобы получилось следующее:

 { //... "scripts" : { // ... "dev": "webpack-dev-server --mode development --open", "build": "webpack --mode production" } //... }

Теперь, как только это будет сделано, будет выдан npm run dev, и мы получим следующее:

Теперь, когда сервер webpack dev запущен, всякий раз, когда происходят изменения в сценариях, модули снова объединяются и отображаются на странице браузера без каких-либо действий. Все это происходит с начальной конфигурацией!!!

Более детальное изучение конфигураций webpack

Теперь, когда мы разобрались с основами работы webpack, давайте углубимся в конфигурацию webpack 4 и в то, как мы будем использовать их в нашем приложении forexaster.

Первым делом нам нужно создать webpack.config.js, он будет содержать все наши настройки webpack.

touch webpack.config.js

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

Настройка плагинов. Ранее мы вручную создали файл index.html . Это не единственный способ получить файл index.html . Можно использовать html-webpack-plugin. Мы не будем рассматривать, как динамически генерировать наш index.html.

Удалите созданный вручную index.html

Установите **html-webpack-plugin**

Чтобы установить webpack-плагин, мы запускаем следующую команду на устройстве:

npm install html-webpack-plugin 

Создайте **index.html** шаблон

В папке src/ мы создаем файл шаблона index.html, от которого будет построена наша последняя страница.

 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> <%= htmlWebpackPlugin.options.title %> </title> </head> <body> <h1>Weather in your location is 19 degrees and its raining</h1> </body> </html>

Обратите внимание, как в шаблоне указаны плэйсхолдеры. Отредактируйте **webpack.config.js** чтобы включить плагин

Теперь нам нужно использовать плагин. Чтобы сделать это, мы изменим webpack.config.js:

 var HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { plugins: [ new HtmlWebpackPlugin({ hash: true, title : 'Weather Forecaster', template : './src/index.html' }) ] };

Мы указываем, где находится шаблон, а также вводим тот заголовок, который намерены представить на странице.

Настройка загрузчиков. По умолчанию webpack загружает только файлы javascript. Чтобы позволить webpack загружать другие ресурсы, такие как css, ts, scss, мы будем использовать загрузчики. Например, css-loader, который помогает собирать CSS из всех необработанных ссылок css-файлов, а style-loader будет размещать результат, полученный от css-loader и помещать его в теги style в файле index.html.

Установите css-loader и style-loader

Чтобы установить загрузчики, запустите команду

npm install css-loader style-loader--save-dev 

Создайте файл .css

В папке src/ app мы создаем app.css

touch app.css 

Теперь app.css может выглядеть так

 h1 { color: green; padding-left : 50px; } 

Используйте **css-loader** и **style-loader** в конфигурации webpack

Теперь webpack.config.js должен выглядеть так:

module.exports = { [...] module: { rules: [ { test:/\.css$/, use:['style-loader','css-loader'] } ] } }

Файлы с именем, соответствующим регулярному выражению, должны использовать css-loader а затем style-loader по результату css-loader

webpack применяет загрузчики справа налево, поэтому [‘style-loader’, ‘css-loader’]

Включите стиль как зависимость в **index.js**

Если мы не будем включать стиль в качестве зависимости в index.js, файл app.css не будет связан с webpack, потому что мы вообще не включили файл.

Мы включаем файл, обновляя index.js следующим образом:

import './app.css'; alert("It's going to rain today! Take your umbrella"); 

Запуск приложения

Ранее мы указали некоторые скрипты запуска в папке package.json. Теперь нам просто нужно запустить команду в зависимости от того, что мы хотим сделать. В этом случае мы просто тестируем приложение, поэтому запускаем так:

npm run dev 

Это запускает приложение с включенной перезагрузкой.

Заключение

В этой статье мы рассмотрели основные шаги, связанные с началом работы с webpack 4 с использованием нулевых конфигураций. Мы также рассмотрели, как включить автоматическую и непрерывную перезагрузку, используя webpack dev server . Есть гораздо больше того, что можно сделать с помощью webpack, но вы все хорошо разбираетесь в своих приложениях. Если вам интересно, вот ссылка на полный репозиторий github.

Автор: Chris Nwamba

Источник: https://scotch.io/

Редакция: Команда webformyself.