Как установить webpack на ubuntu
Потому что для решения некоторых проблемных точек проекта:
- Управление сторонними надстройками беспорядочно, и его необходимо повторно импортировать каждый раз, когда вы его используете.
- Новые свойства CSS3 не добавляют частные префиксы, синтаксис ES678 не адаптирован, а совместимость веб-страниц низкая.
- Файл проекта не оптимизирован, а производительность веб-страницы низкая.
Слишком много запросов на сторонние ресурсы для увеличения, сжатие локального кода js / css, сжатие локальных изображений и т. д. - Спецификации кода не являются обязательными, а некоторые коды могут не соответствовать корпоративным требованиям.
Во-вторых, что такое веб-пакет?
- webpack - это набор «инструментов упаковки модулей» на основе NodeJS,
- Когда webpack был впервые запущен, это был чистый инструмент упаковки модулей JS, который может объединять и упаковывать файлы JS нескольких модулей в один файл (управлять только js).
- Но со временем стремление многих разработчиков и вклад многих разработчиков
Теперь webpack может не только упаковывать модули JS, но и другие файлы, такие как CSS / LESS / SCSS / pictures.
В-третьих, зачем нам разделять модули?
- Если весь JS-код записан в одном файле, это очень невыгодно для обслуживания и повторного использования кода.
- Таким образом, мы можем писать разные функции в разные модули, что улучшает ремонтопригодность и возможность повторного использования кода.
- Но когда код записывается в другой модуль, возникает новая проблема:
Например: больше импортированных ресурсов, больше запросов и низкая производительность веб-страницы.
Например: разные функции помещаются в разные модули, тогда как поддерживать взаимосвязь между модулями стало сложной проблемой (зависимости между модулями, порядок импорта)
Например:
В-четвертых, как решить вышеперечисленные проблемы - использовать webpack.
- Когда проект переходит в режим онлайн, все используемые модули объединяются в один файл, и код модуля помещается впереди, а код использования - сзади.
- Импортируйте только основной файл в index.html, а затем импортируйте зависимые модули в основной файл
Пятый, как упаковать JS-модули через webpack
1. Установите webpack
- Чтобы установить последнюю версию или определенную версию, выполните одну из следующих команд:
npm install --save-dev webpack
npm install --save-dev webpack
- Если вы используете версию webpack 4+, вам также необходимо установить CLI.
2. Напишите модульный код
После использования webpack для упаковки напрямую импортируйте упакованный файл в html-файл, чтобы правильно открыть его в браузере.
3. Введите в терминал инструкции по упаковке: npx webpack index.js
- быть осторожен:
index.js - это файл, который необходимо упаковать, и все файлы, от которых зависит index.js, будут упакованы в один файл.
Упакованный файл будет помещен в каталог dist с именем main.js
Этот шаг можно использовать для настройки файла webpack вместо использования терминала для ввода команд. Подробнее см.Запись файла конфигурации Webpack
Webpack является одним из самых мощных и гибких инструментов для сборки frontend. Она содержит основные понятия, однако для начала их будет достаточно.
Инструменты сборки стали неотъемлемой частью веб-разработки, в основном из-за возрастающей сложности JS-приложений. Бандлеры позволяют нам упаковывать, компилировать, организовывать множество ресурсов и библиотек, необходимых для современного веб-проекта.
В этом гайде будет рассмотрен webpack, мощный бандлер с открытым исходным кодом, который может обрабатывать огромное количество различных задач. Автор статьи покажет вам как писать модули, бандл код, использовать некоторые плагины загрузчика. Пособие подойдет для тех, кто только начинает изучать этот инструмент, однако уже имеет некоторые знания JS.
Как и во многих других аспектах веб-разработки, здесь нет стандартного набора инструментов, который нужно использовать. Прямо сейчас разработчики могут выбирать между webpack, Gulp, Browserify, NPM scripts, Grunt и еще десятком других. Можно, конечно, провести их глубокое сравнение, но в целом все эти инструменты очень похожи, поэтому чаще всего дело сводится к личным предпочтениям и типу проекта, над которым вы работаете.
Тут некоторые плюсы и минусы, которые помогут вам решить, подходит ли этот бандлер именно вам:
- Великолепен для работы с одностраничными приложениями
- Воспринимает как require()- так и import-синтаксисы модуля
- Позволяет осуществлять продвинутое разделение кода для более быстрой разработки с помощью React, Vue.js и подобных фреймворков
- Наиболее популярный инструмент разработки по версии обзора JS в 2016 году
- Не подойдет для новичков
- Работа с файлами CSS, картинками и другими не JS ресурсами по началу сбивает с толку
- Документация могла бы быть лучше
- Очень много изменений, большинство гайдов 2016 уже устарели
Самый простой способ установки это использовать менеджер пакетов. Мы будем пользоваться npm, но вы можете использовать Yarn или любую другую альтернативу. В обоих случаях вам нужно иметь Node.js и готовый к работе package .json на компьютере.
Предпочтительнее устанавливать его локально без тега –g . Это поможет каждому, кто работает над вашим проектом, быть уверенным в том, что у вас одна и та же версия webpack’a.
После того как вы установили бандлер, лучше всего запустить его с помощью скрипта Node.js. Добавьте эти строки в ваш package.json.
Теперь с помощью вызова npm run build из командной строки мы можем сделать webpack bundle нашими файлами ( -р означает создание и уменьшает связанный код). С запуском npm run watch начнется процесс, который автоматически свяжет наши файлы в случае изменения любого из них.
Последняя часть нашей настройки — это указать webpack, какие файлы связывать. Рекомендуем сделать это путем создания config файла.
Здесь мы рассмотрим файл конфигурации в его самой базовой форме, но не позволяйте ему вас провести- файл конфигурации webpack достаточно мощный, довольно сильно различается от проекта к проекту и в некоторых случаях может стать ну очень сложным.
В корневой директории вашего проекта добавьте файл webpack.config.js.
webpack.config.js
entry указывает webpack’y, какой из JavaScript файлов является основным. Существует множество различных стратегий настройки входных точек, но в большинстве случаев достаточно одной записи. В output мы указываем имя нашего пакета и путь к нему. После запуска webpack мы получим весь наш JavaScript в файле bundle.js. Это единственный файл, который мы будем связывать в нашем HTML:
<script src= "./dist/bundle.js" >
Этой настройки должно быть достаточно для того, чтобы начать. Позже мы добавим кое-что сюда, а пока давайте посмотрим, как работает модуль.
Webpack предоставляет несколько способов работы с модулями, и большую часть времени вы можете свободно работать с любым из них. Для этого урока мы будем использовать синтаксис импорта ES6.
Мы хотим добавить модуль, который приветствует наших пользователей. Мы создаем файл greeter.js и экспортируем простую функцию.
Чтобы использовать этот модуль, мы должны импортировать его и вызвать его в нашей точке входа, которым является, если вы посмотрите на файл конфигурации, - index.js.
Теперь, когда мы запускаем bundler с npm run build и открываем наш HTML в браузере, мы видим следующее:
Наша точка входа и наш модуль greeter были скомпилированы в один файл, называемый bundle.js, и он был выполнен браузером. Вот простая схема того, что происходит на данный момент:
Мы хотим, чтобы наше приложение указывало, в какой день недели он встречает пользователей. Для этого мы будем использовать moment.js, импортируя его непосредственно в наш модуль greeter.
Сначала мы должны установить библиотеку через npm:
Затем в нашем модуле приветствия мы просто импортируем библиотеку точно так же, как мы импортировали локальные модули в предыдущую точку:
Наша блок-схема теперь выглядит так:
Примечание. Существуют и другие, более продвинутые методы для включения библиотек, но они выходят за рамки этой статьи. Подробнее о них можно прочитать здесь.
Загрузчики - это способ webpack выполнять задачи во время компоновки и до или после обработки файлов каким-либо образом. Например, они могут компилировать TypeScript, загружать компоненты Vue.js, отображать шаблоны и многое другое. Большинство загрузчиков написаны сообществом, поскольку список популярных загрузчиков можно посмотреть здесь.
Предположим, мы хотим добавить линтер к нашему проекту, который проверяет наш код JS на наличие ошибок. Мы можем это сделать, включив загрузчик JSHint, который будет перехватывать все виды плохого кода.
Сначала нам нужно установить JSHint и загрузчик webpack JSHint:
Теперь мы собираемся добавить несколько строк в наш файл конфигурации webpack. Это инициализирует загрузчик, сообщает ему, какие типы файлов следует проверять, а какие - игнорировать.
webpack.config.js
Теперь, когда webpack запущен, он покажет нам список предупреждений в терминале (которые мы проигнорируем):
Поскольку moment.js находится в папке node_modules, он не будет линтирован загрузчиком JSHint:
На этом мы заканчиваем наше знакомство с webpack! Поскольку это урок для новичков, мы попытались охватить только самые полезные и обязательные концепции инструмента. Мы надеемся, что руководство было полезным, не слишком запутывающим, и, исходя из названия, займет 15 минут.
В ближайшем будущем автор планирует добавить вторую часть к этому учебному пособию, объясняя, как работать с модулями CSS и другими более продвинутыми функциями. Тем временем, если вы хотите больше узнать о webpack (и есть намного больше), он рекомендует проверить эти потрясающие ресурсы:
Webpack — это инструмент, позволяющий скомпилировать, например, JavaScript модули в единый JS-файл. Webpack также известен как сборщик модулей.
При большом количестве файлов он создает один объемный файл (или несколько файлов) для запуска вашего приложения.
Он также способен выполнять множество иных операций:
- помогает собрать воедино ваши ресурсы
- следит за изменениями и повторно выполняет задачи
- может выполнить транспиляцию JavaScript следующего поколения до более старого стандарта JavaScript (ES5) с помощью Babel, что позволит использовать новейшие функции JavaScript, не беспокоясь о том, поддерживает их браузер или нет
- может выполнить транспиляцию CoffeeScript в JavaScript
- может конвертировать встроенные изображения в data:URI
- позволяет использовать require() для CSS файлов
- может запустить webpack-dev-server (в нём встроен локальный сервер и livereload (“живая перезагрузка браузера”))
- может работать с Hot Module Replacement (замена горячего модуля)
- может разделить выходной файл (output file) на несколько файлов, чтобы избежать медленной загрузки страницы из-за большого размера JS-файла
- может выполнить Tree Shaking
Webpack не ограничивается одним лишь фронтендом, его также успешно применяют в бэкенд разработке на Node.js.
У Webpack есть предшественники, у которых он перенял многие идеи. Основное различие заключается в том, что те инструменты известны как task runners (такс-раннеры), в то время как Webpack ничто иное, как сборщик модулей.
Webpack — э т о более целенаправленный инструмент. Вам достаточно указать точку входа в ваше приложение (это может быть даже HTML-файл с тегами <script>), а webpack проанализирует файлы и объединит их в один выходной JavaScript-файл, содержащий все необходимое для запуска приложения.
Webpack может быть установлен глобально или локально для каждого проекта.
Глобальная установка
Глобальная установка с помощью Yarn:
Теперь мы можем запустить webpack:
Локальная установка
Это рекомендуемый способ установки, поскольку Webpack может обновляться каждый проект и у вас возникнет меньше проблем при использовании последних функций для одного небольшого проекта, нежели постоянное обновление всех проектов, в которых используется Webpack.
Установка с помощью Yarn:
После этого добавьте эти строчки в свой package.json файл:
Как только все будет сделано, вы можете запустить Webpack, набрав:
в корневом каталоге проекта.
По умолчанию, Webpack (начиная с 4-й версии) не требует никакой настройки, если вы соблюдаете эти правила:
- точкой входа вашего приложения является ./src/index.js
- вывод (output) размещается в ./dist/main.js
- Webpack работает в production mode (режим производства)
Конечно, если понадобится, вы сможете настроить каждую мельчайшую деталь в Webpack. Конфигурационный файл Webpack - webpack.config.js хранится в корневой директории проекта.
Точка входа
По умолчанию, точкой входа является ./src/index.js . Нижеприведенный пример использует файл ./index.js в качестве входной точки.
Вывод (output)
По умолчанию, вывод размещается в ./dist/main.js . В нижеприведенном примере, результат работы в Webpack генерируется в файле app.js :
С помощью Webpack можно использовать оператор import или require в своем JavaScript коде для того, чтобы подключать файлы любого типа (например, CSS).
В Webpack загрузчики являются аналогами задач (tasks) в Grunt и Gulp. Они принимают содержимое файлов, а затем преобразуют его необходимым образом и включают результат преобразования в общую сборку. Например, они могут компилировать TypeScript, загружать компоненты Vue.js и многое другое.
Например, в своем коде вы можете использовать:
указав конфигурацию данного загрузчика в файле webpack.config.js :
Регулярное выражение применяет данный загрузчик только к CSS файлам.
У загрузчика есть параметры:
Для одной и той же задачи может потребоваться несколько загрузчиков:
Порядок выполнения перевернут (последнее выполняется первым).
Так сколько всего существует загрузчиков? Очень много! Здесь вы сможете найти полный список.
Самым часто используемым загрузчиком является Babel — он используется для транспиляции современного JavaScript в ES5:
Данный пример заставляет Babel предварительно обрабатывать все наши React/JSX файлы:
Здесь вы можете увидеть параметры babel-loader .
Плагины — это почти то же самое, что и загрузчики, но под стероидами. Они могут сделать то, что не могут загрузчики. Ко всему прочему, Webpack построен на системе плагинов, которые вы используете в своем файле конфигурации.
Рассмотрим следующий пример:
Плагин HTMLWebpackPlugin автоматически создает HTML-файл с уже подключенным скриптом.
Здесь доступно множество плагинов.
Еще один полезный плагин, CleanWebpackPlugin , мы можем использовать перед перегенерацией файлов, чтобы очистить нашу папку dist/ и получить аккуратный файл с конфигурацией.
Данные режимы (появившиеся в 4-й версии Webpack) настраивают среду, в которой будет работать Webpack. Режим может быть настроен на development или production (по умолчанию стоит production ).
Режим production работает медленнее, чем development , так как ему нужно создать более оптимизированный бандл. Полученный JavaScript файл меньше по размеру, поскольку многое из режима development в нем отсутствует.
В этом руководстве я познакомлю вас со всеми основными понятиями Webpack, которые помогут начать работу с этим сборщиком модулей.
В данном руководстве используется webpack 4.30.
Webpack-что это?
Webpack – это статический модульный сборщик. В проекте он обрабатывает все файлы и ресурсы как модули. При этом сборщик опирается на граф зависимостей, в котором описывается взаимосвязь модулей с помощью ссылок (операторы require и import ).
Таким образом, webpack статически перемещается по всем модулям для построения графа и использует его для генерации одного бандла
Бандл – это файл JavaScript, содержащий код из всех модулей проекта и объединенных в правильном порядке. Когда webpack создает граф зависимостей, он не выполняет исходный код, а объединяет модули и их зависимости в бандл.
Базовые понятия Webpack
- Entry – модуль, который используется для построения внутреннего графа зависимостей. С его помощью webpack определяет, от каких модулей и библиотек зависит точка входа (напрямую и не напрямую). Затем включает их в граф, пока не останется ни одной зависимости. По умолчанию для свойства entry установлено значение ./src/index.js . Но можно указать другой модуль в файле конфигурации сборщика.
- Output – это свойство указывает, где webpack должен сохранять бандл и как называть его файл (или файлы). Значением по умолчанию является ./dist/main.js для основного бандла и ./dist для других сгенерированных файлов.
- Загрузчики. По умолчанию webpack понимает только файлы JavaScript и JSON. Чтобы обработать другие типы файлов и конвертировать их в модули, сборщик использует загрузчики. Например, загрузчик может трансформировать файлы из языка CoffeeScript в JavaScript или встроенные изображения в URL-адреса. С помощью загрузчиков можно даже импортировать CSS-файлы прямо из модулей JavaScript.
- Плагины. Используются для задач, которые не могут выполнять загрузчики.
- Режимы. Webpack позволяет настроить режим на development , production или none . Благодаря этому он может использовать встроенные оптимизации для каждой среды. По умолчанию установлено значение Режим none означает, что все опции оптимизации по умолчанию будут отключены. Чтобы узнать больше об опциях, которые webpack использует в development и production , посетите страницу конфигурации режимов .
Как работает Webpack
В любом веб-проекте есть файлы HTML, CSS, JavaScript, ресурсы, как шрифты, изображения и т.д. Таким образом, рабочий процесс webpack включает в себя настройку файла index.html с соответствующими ссылками на CSS, JavaScript и необходимые ресурсы.
При выполнении задач webpack опирается на конфигурацию. Они прописаны в файле webpack.config.js . В нем указано, как файлы и ресурсы следует трансформировать.
В соответствии с предоставленной конфигурацией webpack запускается с точек входа и обрабатывает каждый модуль, с которым сталкивается, при построении графа зависимостей.
Если модуль содержит зависимости, процесс выполняется рекурсивно для каждой зависимости. Затем webpack объединяет все модули проекта в небольшое количество бандлов (обычно только один), чтобы их можно было загрузить в браузер.
Приступим
Файлы нашего проекта можно найти в репозитории на Github .
Сначала создадим новый каталог и перейдем в него. Затем инициализируем новый проект:
После этого нужно локально установить webpack и webpack CLI:
Теперь код сгенерированного файла package.json должен выглядеть следующим образом:
Также webpack можно использовать в качестве менеджера задач. Для этого нужно разместить задачу и ее инструкции в разделе scripts файла package,json . Попробуем сделать это прямо сейчас. Откройте файл package.json и измените объект scripts следующим образом:
Создадим каталог src и поместим в него файл index.js . Теперь мы можем запустить задачу dev , чтобы webpack работал в режиме разработки:
Отобразим результат работы сборщика в браузере. Для этого создадим файл index.html в каталоге dist :
В некоторых случаях создание файла index.html вручную может быть проблематичным. Например, если мы изменим имя точки входа, то сгенерированный пакет будет переименован. Но файл index.html по-прежнему будет ссылаться на старое имя. Поэтому нужно будет вручную обновлять HTML- файл каждый раз, когда понадобится переименовать точку входа или добавить новую. Этого можно избежать с помощью html-webpack-plugin. Установите этот плагин:
Чтобы активировать плагин, создайте файл webpack.config.js и поместите в него следующий код:
Чтобы активировать плагин webpack, нужно включить его и добавить в массив plugins . При необходимости передаем плагину необходимые параметры.
Запустим сборку и посмотрим на результат:
Откроем файл index.html . Как видим, плагин автоматически создает обновленный файл index.html , который использует параметр title из конфигурации:
Теперь определим пользовательские имена для свойств input и output . В webpack.config.js перед свойством plugins добавляем следующий код:
После этого создадим файл src/component.js :
Переименуем index.js в app.js , чтобы отразить внесенные изменения, и заменяем его содержимое следующим кодом:
Теперь запустим webpack:
Изучим и проясним для себя информацию из вывода, предоставляемого webpack. Вверху указаны хэш сборки, версия webpack и время выполнения сборки.
Работа со скриптами
Мы рассмотрим, как перенести ES6 в ES5-совместимый код, который работает во всех браузерах. Начнем с выполнения приведенной ниже команды:
Затем откроем файл main.bundle.js :
Современные функции из стандарта JavaScript ES6 (стрелочная функция и объявление const ) из модуля component.js по умолчанию не преобразованы в ES5-совместимый код. Чтобы код работал в более старых браузерах, необходимо добавить загрузчик Babel:
Затем в файле webpack.config.js добавьте module после свойства output :
При определении правил для загрузчика webpack нужно установить три основных свойства:
- test – описывает, какие файлы следует трансформировать.
- exlude – определяет, какие файлы из загрузчика не следует обрабатывать.
- use – указывает, какой загрузчик следует использовать для сопоставленных модулей.
Еще раз введите приведенную ниже команду:
На этот раз код в файле main.bundle.js компилируется в следующий:
Теперь мы можем использовать современные функции JavaScript. При этом webpack преобразует код так, чтобы его могли выполнять устаревшие браузеры.
Работа со стилями
Чтобы добавить CSS в проект, потребуются два загрузчика:
css-loader преобразует CSS-код в JavaScript и разрешает любые зависимости, а style-loader выводит CSS в теге <style> в HTML- документе.
Добавим в файл webpack.config.js необходимую конфигурацию:
Создадим файл src/style.css :
Затем импортируем его в файл app.js :
Управление ресурсами
Далее мы рассмотрим пример с изображениями. Сначала нужно установить загрузчик файлов:
Затем добавить новое правило в файл webpack.config.js:
Чтобы протестировать загрузчик, создадим файл image-component.js в каталоге src со следующим кодом:
Здесь мы импортируем изображение как модуль и используем его в теге <img/> . Нужно поместить это изображение в каталог src .
После этого импортируем компонент изображения в файл app.js :
Ускорение процесса разработки с помощью webpack-dev-server
Нам приходиться перестраивать проект всякий раз, когда вносим какие-то изменения в код. К счастью, webpack предоставляет веб-сервер, который автоматически создает и обновляет страницу. Чтобы установить его, запустите приведенную ниже команду:
Чтобы использовать сервер, нужно обновить dev -скрипт в файле package.json :
А затем настроить сервер в файле webpack.config.js , добавив следующее свойство:
После этого webpack-dev-server начинает обслуживать файлы из каталога dist и автоматически открывать страницу входа.
Теперь при запуске webpack ( npm run dev ) мы увидим, как страница открывается в браузере автоматически на localhost: 8080 :
Если изменить любой из исходных файлов и сохранить их, веб-сервер автоматически перезагрузит страницу после компиляции кода.
Очистка вывода
По мере расширения проекта папка dist становится дольно объемной. При каждой сборке webpack будет генерировать бандлы, и помещать их в папку dist . Но при этом сборщик не отслеживает, какие файлы используются в проекте по факту. Поэтому рекомендуется очищать папку dist перед каждой сборкой, чтобы генерировались только используемые файлы. Для этого нужно установить и настроить clean-webpack-plugin:
Затем запустите webpack ( npm run build ) и проверьте папку dist . Теперь вы увидите в ней только файлы, сгенерированные из сборки. В нашем случае файл, который следует удалить, это main.js .
Заключение
Webpack – это полезный и мощный инструмент. В данном руководстве представлены только его базовые возможности. Но webpack способен на большее. Вот список ресурсов для дальнейшего изучения возможностей сборщика:
Пожалуйста, оставьте ваши комментарии по текущей теме материала. За комментарии, лайки, отклики, дизлайки, подписки низкий вам поклон!
Читайте также: