Webpack на практике с нуля до создания автотестов


Оглавление (нажмите, чтобы открыть):

Разбираемся с настройкой Webpack для любого проекта

Большинство разработчиков так или иначе взаимодействовали с webpack при работе с проектами на React, Angular или Vue. В большинстве подобных ситуаций хватает настроек по умолчанию, поэтому освоение самого webpack как правило откладывается на потом. И если это так для вас, это может быть не правильно, так как уже базовые знания настроек webpack могут значительно улучшить процесс разработки.

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

webpack – это мощный сборщик проектов, который может быть очень эффективным при правильном использовании.

Почему все используют webpack?

Альтернативой использованию webpack является использование комбинации менеджеров задач, таких как grunt или gulp, со сборщиком пакетов, подобным browserify. Но что заставляет разработчика выбирать webpack, а не использовать его альтернативы?

Webpack решает задачу сборки более интегрированным и естественным образом. В browserify для этого вам придется использовать gulp/grunt и длинный список дополнительных модификаторов и плагинов. Webpack предлагает достаточно обширный функционал по умолчанию уже из коробки.

Webpack работает на основание файла конфигурации, в отличие от gulp/grunt, где мы должны писать код для выполнения своих задач. В зависимости от конфигурации он может делать правильные предположения о том, что вам необходимо сделать; как работать с различными модулями JS, как компилировать код и как управлять активами и так далее. Так же есть функция горячей перезагрузки проекта live-reload. Возможность замены выходных имен файлов именами хеш-файлов которые позволяет браузерам легко обнаруживать измененные файлы путем включения в имя файла специфичного для сборки хэша. И это лишь некоторые основные моменты, которые делают webpack лучшим выбором.

Особенности webpack

Базовые функции, некоторые из которых мы обсудим далее:

  • Загрузчики (Loaders)
  • Плагины (Plugins)
  • Использование разных конфигураций для разных окружений
  • Отложенная загрузка модулей
  • Удаление с помощью tree shaking забытого кода
  • Горячая замена модуля, которая позволяет обновлять код во время выполнения без необходимости полного обновления
  • Кэширование путем подстановки имен файлов хэшами

Настройка проекта

Начальные условия

Для продолжения этого урока нам потребуется установленный Node.js, в котором так же должен быть установлен менеджер пакетов npm. Затем мы установим yarn, которая является альтернативой npm, что даст дополнительные функциональные возможности и улучшить скорость установки дополнительных пакетов.

Начальная структура каталогов

Мы начнем с создания структуры каталогов. Создайте папку для тестового проекта Webpack-Setup. Внутри нее инициализируйте проект с помощью команды yarn init, которая создаст для нас файл package.json.

Далее в ней создайте папку src. Затем зайдите в папку src и там создайте еще три папки: app, public, style.

  • src: тут будет размещается исходный код проекта.
  • src/app: здесь будут размещаться наши файлы JavaScript.
  • src/public: эта папка будет содержать ресурсы проекта и статические файлы.
  • src/style: в этой папке будут глобальные стили проекта.

Далее создадим файлы проекта.

Создайте пустой файл src/app/index.js этот файл будет главной точкой входа в наш проект.

Файл src/public/index.html основной шаблон проекта

Создайте пустой файл src/style/app.scss он нам пригодится позже.

Начальная конфигурация

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

HtmlWebpackPlugin упрощает создание файлов HTML и может автоматически вставлять модули JavaScript в наш основной шаблон HTML.

Первым делом установим основные модули: webpack и webpack-dev-server (облегченный веб сервер для разработки).

Так же нам будет нужен webpack-cli:

Теперь создадим файл конфигурации webpack. В корне проекта создайте файл webpack.config.js со следующим содержимым:

Начальная конфигурация представляет собой скелет нашего проекта со следующими частями.

  • entry – Указывает на точку входа в проект, и откуда нужно начать построение графа внутренних зависимостей проекта.
  • output – Указывает куда будут отправляться создаваемые файлы сборки и как называть эти файлы.
  • devServer – Набор параметров для использования webpack-dev-server.

Далее добавим команду start в файл package.json.

Затем мы можем запустить наше приложение с:

В консоле должно отобразиться что то типа такого:

Затем вы можете перейти по адресу http://localhost:7700/, чтобы увидеть наше приложение.

Загрузчики

Загрузчики (loaders) – это специальные модули, которые используются для «загрузки» других модулей (написанных на другом языке). Так же они позволяют предварительно обрабатывать файлы по мере их импорта или «загрузки».

Таким образом, загрузчики в некотором роде похожи на «задачи» в других инструментах сборки и предоставляют собой мощный способ обработки шагов сборки.

Загрузчики могут преобразовывать файлы с одного языка на другой, например TypeScript в JavaScript или из sass в css. Они могут даже позволить нам делать такие вещи, как импорт файлов CSS и HTML непосредственно в наши модули JavaScript. Для их использование необходимо прописать нужные загрузчики в разделе module.rules файла конфигурации.

babel-loader

Этот загрузчик использует Babel для загрузки файлов ES2015. Мы установим babel-core, в который входит babel-loader. Также подключим модуль babel-preset-env, который компилирует ES2015+ в ES5 путем автоматического определения необходимых Babel плагинов и полифайлов. Для этого с начало установим их, командой:

Затем создаем файл .babelrc, в корне проекта, и в нем пропишем пресеты.

Теперь мы можем включить наш загрузчик в нашу конфигурацию для преобразования файлов Javascript. Это позволит нам использовать синтаксис ES2015 + в нашем коде (который будет автоматически конвертироваться в ES5 в окончательной сборки).

Тестирование результата

Внесите следующий код в файл src/app/index.js:

Приведенный выше фрагмент кода отобразит сообщение в консоли браузера: Using ES2015+ syntax. Далее мы продемонстрируем работу нескольких загрузчиков с популярными фреймворками, включая Angular (1.5+) и React.

raw-loader

Это загрузчик, который позволяет нам импортировать файлы в виде строки. Мы покажем это, импортировав шаблон HTML для использования в качестве angular компонента.

Добавим в наш проект Angular и загрузчик raw-loader:

Добавьте следующий код в файл конфигурации webpack

В файл src/app/index.js внесите следующий код:

В файл src/public/index.html внесите следующий код:

А так же в каталоге src/app/ создайте новый файл index.tpl.html

sass-loader

Загрузчик sass-loader помогает нам использовать стиль scss в нашем приложении. Для этого требуется модуль node-sass, который позволяет нам скомпилировать файлы .scss в css . Рекомендуется использовать его вместе с css-loader, чтобы превратить его в модуль JS и загрузчик стилей, которые добавят CSS в DOM, внедряя тег style.

Начнем с установки модулей:

Внесите следующие изменения в файл настроек webpack

Далее внесите следующие изменения в src/style/app.scss:

Использование стилей

Для этого нам достаточно импортировать стили в шаблон, как показано ниже:

Плагины

Плагины являются основой webpack, так как по сути вся его работа построена на системе плагинов. Они значительно расширяют возможности загрузчиков.

Загрузчики выполняют предварительную обработку файлов любого формата. Они работают на уровне отдельных файлов во время или до создания пакета. После того как отработают загрузчики наступает очередь плагинов. Плагины как правило отрабатывают только одну функцию.

Плагины работают на уровне пакета или блока и обычно запускаются в конце процесса генерации пакета.

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


Мы уже использовали html-webpack-plugin, теперь я покажу, как использовать некоторые распространенные плагины в нашем проекте.

DefinePlugin

DefinePlugin позволяет вам создавать глобальные константы, которые можно использовать во время компиляции. Это очень полезно для управления конфигурациями импорта, такими как ключи API и другими константами, которые можно легко менять под разные окружения. Лучший способ использовать этот плагин – создать файл .env с разными константами и получить к ним доступ в конфигурации с помощью пакета dotenv, после чего мы сможем напрямую ссылаться на эти константы в нашем коде.

Затем создайте файл в корне проекта .env со следующим содержимым.

Настройка файла конфигурации webpack:

Далее добавьте следующую строку в src/app/index.js:

Должно в итоге получится что то типа такого:

webpack-dashboard

Это редко используемая панель инструментов CLI для webpack-dev-server. Плагин добавляет «красоту и порядок» в среду разработки, и вместо обычных журналов консоли мы видим привлекательную, легко интерпретируемую панель инструментов.

Внесем изменения в файл конфигурации:

Затем мы отредактируем наш package.json, чтобы использовать плагин.

После запуска проекта командой yarn start мы должны увидеть что то типа такого:

Среды разработки

В этом последнем разделе мы сосредоточимся на том, как мы можем использовать webpack для управления различными конфигурациями среды окружения. Мы покажем как использовать плагины в зависимости от среды, которые предназначены либо для тестирования, или для разработки, или для продакшин в зависимости от предоставленных переменных. Мы будем полагаться на пакет dotenv. В зависимости от окружения у нас будут различаться использование таких инструментов как devtool и плагины: extract-text-webpack-plugin, UglifyJsPlugin и copy-webpack-plugin и другие.

  • devtool – Управляет генерацией source map.
  • copy-webpack-plugin – Копирует отдельные файлы или целые каталоги в каталог сборки. Этот плагин рекомендуется для использования в продакшин, чтобы копировать все активы в выходную папку.
  • uglifyjs-webpack-plugin – Используется для минимизации кода проекта. Рекомендуется использовать в продакшин, чтобы уменьшить размер окончательной сборки.

Настройка файла конфигурации

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

Теперь если добавьте в файл .env следующую переменную:

легко увидеть что разница между размерами пакетами сборки до и после минификации огромна.

Заключение

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

Что такое Webpack? Современные инструменты frontend-разработчика

Всех приветствую, с вами Сергей Никонов и в этом уроке я расскажу про Webpack.

Итак, что же такое Webpack?

Webpack — это инструмент для сборки современных frontend-приложений.
В настоящий момент, по популярности, Webpack опережает похожие инструменты, такие как Gulp и Grunt.

Логика работы очень простая, но для того, чтобы понять какие задачи решает Webpack, вам необходимо понимать из чего состоит современное веб-приложение.

Смотрите видео Что такое Webpack

Дело в том, что современное веб-приложение может состоять из достаточно большого количества файлов и может быть написано с помощью современного JavaScript и различных препроцессоров, например SASS и других.

Браузеры пока в полной мере не поддерживают эти технологии и по этой причине, для преобразования кода на современном JavaScript в JavaScript ES5 и перевода кода из SASS в css и многих других задач, используются дополнительные инструменты, такие как webpack.

Когда вы один раз настроите Webpack для вашего фронтенд приложения, вебпак будет автоматически выполнять все рутинные задачи, а вам останется только наслаждаться написанием вашего кода!

В конечном итоге, используя Webpack, вы будете получать две версии вашего проекта: Первая — это исходный код, который вы будете писать с помощью современного javascript и использовать другие удобные инструменты и вторая версия вашего веб-приложения — это преобразованный код для публикации на хостинг. Как на схеме ниже:

Мастер Йода рекомендует:  Изучение Python ТОП-10 вопросов разной направленности

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

Это позволяет сокращать размер вашей страницы и в итоге ваше веб приложение будет загружаться у пользователей быстрее. А быстрая загрузка сайта — один из важнейших факторов для успешного продвижения сайта.

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

В следующих уроках я покажу как настроить webpack для вашего проекта. Так же с помощью webpack мы интегрируем Babel JS в наш проект, для написания кода на современном javascript.

Это один из уроков большого курса по современному Javascript.

Установка и настройка Webpack 4 для работы с проектом

(материал без привязки к стэку react/redux/etc)

В сети есть миллионы туториалов, поэтому вы, вероятно, видели тысячи различных способов конфигурации файла Webpack. Каждый из них работает и может служить примером, хотя все они немного разные. Почему так? Сам Webpack развивается очень быстро, и многие загрузчики (лоадеры) и плагины должны идти с ним в ногу. Это основная причина, из-за чего конфиги так отличаются друг от друга: с различными комбинациями одних и тех же инструментов все может как работать, или не работать.

Позвольте мне выразить мое искреннее мнение: многие люди жалуются на Webpack и трудности в конфигурации. Во многих отношениях это так, хотя с моим опытом работы с gulp и grunt следует сказать, что вы сталкиваетесь с теми же проблемами несовместимости. Когда вы используете npm модули, несовместимости некоторых версий не избежать.

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

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

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

Улучшенная производительность: webpack 4 — самая быстрая версия webpack.

Разумные значения по умолчанию: основные понятия webpack 4 — точка входа, точка выхода, загрузчики(лоадеры) и плагины. Я не буду подробно их описывать, только скажу, что между загрузчиками и плагинами очень расплывчатая разница. Все зависит от того, как автор реализовал библиотеку.

Основные понятия

точка входа (entry)

Это ваш .js файл. Вы, возможно, видели несколько конфигураций, в которые включены файлы .scss или .css. Это довольно серьезный хак и он может привести ко множеству неожиданных ошибок. Также иногда встречается вход с несколькими .js файлами. Хотя некоторые плагины позволяют это сделать, скажу, что так делать стоит только тогда, когда вы четко понимаете, зачем вам это нужно.

точка выхода (output)

Это ваша build/ или dist/ или wateveryounameit/ папка, где будет размещен конечный .js файл. Это ваш окончательный результат, который в последсвии будет импортирован в index.html.

Загрузчики (loaders)

В основном компилируют или транспилируют ваш код, например, postcss-loader будет проводить ваши стили через разные плагины.

Плагины (plugins)

Играют жизненно важную роль в выводе кода в файлы.

Быстрый старт

Создайте новую директорию и зайдите в нее:

Необходимо загрузить webpack v4 в качестве модуля и webpack-cli, чтобы запустить его с вашего терминала.

Убедитесь, что установлена именно 4 версия, если же нет, вы можете напрямую выбрать ее в вашем файле package.json. Далее откройте package.json и добавьте build-скрипт:

Скорее всего, вылезет предупреждение:

Режимы Webpack 4 (webpack modes)

Вам необходимо отредактировать скрипт, чтобы в нем появился флаг режима:

Это значит, что webpack ищет папку .src/ с файлом index.js. Для Webpack 4 это действие по умолчанию, так как оно требует нулевой конфигурации.

Давайте создадим директорию с .js файлом, например, ./src/index.js и добавьте в него такой код:

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

Теперь у вас есть директория ./dist/main.js. Отлично, так как мы знаем, что код скомпилирован. Но что произошло?


Новый webpack не требует конфигурации, поэтому перед началом использования вам не нужно возиться с webpack.config.js. Из-за этого он вынужден действовать по умолчанию, и он будет искать папку ./src и в ней index.js и выводить в ./dist/main.js main.js — это ваш скомпилированный файл с зависимостями.

Наличие двух конфигурационных файлов — распространенная практика в webpack, особенно в крупных проектах. Обычно один файл используется для разработки, другой — для продакшена. В webpack есть два режима: продакшен и разработка. Это избавляет от необходимости иметь два файла (для средних по размеру проектов).

Если вы уделяете пристальное внимание нашей работе, то вы уже проверили файл main.js и убедились, что он остался неизменным.

В данном примере я буду использовать build-скрипт, поскольку он уже «из коробки» обеспечивает множество инструментов оптимизации и с этого момента способен свободно их использовать. Основное различие между скриптами build и dev в том, как они выводят файлы. Build создан для продакшен-кода. Dev создан для разработки: он поддерживает hot module replacement, webpack-dev-server и многие другие вещи, которые помогают разработчикам.

Вы легко можете переопределять значения по умолчанию в скриптах npm, просто используя флаги:

Такая запись перепишет опции по умолчанию без каких-либо других настроек.

В качестве упражнения попробуйте также флаги:
— флаг наблюдения (watch) для включения режима просмотра. Он будет следить за изменениями вашего файла и компилировать всякий раз при его изменении.

  • флаг входа. Работает так же, как и выход, но перезаписывает точку входа.

Транспиляция вашего кода .js

Современный JS-код в основном написан на ES6, а ES6 поддерживается не всеми браузерами. Поэтому вам необходимо транспилировать его. Transpile — волшебное слово для перевода ES6 в ES5. Для этого можно использовать babel — наиболее популярный инструмент для транспиляции. Разумеется, мы выполняем это не только для ES6, но и для многих инструментов JS, таких как TypeScript, React и т.д.

теперь у нас есть два варианта конфигурации babel-загрузчика:
— используя конфигурационный файл webpack.config.js;
— используя —module-bind в npm скриптах.

Технически вы многое можете сделать с новыми флагами, представленными в webpack, однако для простоты я бы предпочла webpack.config.js.

Хотя Webpack рекламирует себя как платформа с нулевой конфигурацией, в основном он применяется к основным значениям по умолчанию, таким как точка входа и вывода.

На этом этапе мы создадим webpack.config.js со следующим содержимым:

Также теперь мы удалим флаги из наших npm-скриптов:

Теперь, когда мы запускаем npm run build , он должен вывести нам хороший миниатюрный .js файл в ./dist/main.js. Если этого не происходит, попробуйте переустановить babel-загрузчик.

Наиболее распространенным паттерном webpack является его использование для компиляции приложения react. Хотя это в самом деле так, в этом туториале мы не будем зацикливаться на React-е, поскольку я хочу, чтобы структура была как можно более независимой от фреймворков. Вместо этого я покажу вам, как действовать и создавать конфигурации .html и .css.

##Импорт HTML и CSS

Для начала в нашей папке ./dist создадим небольшой файл index.html.

Как видите, здесь мы импортируем style.css. Давайте настроим его! Так как мы уже упомянули, для webpack у нас есть только одна точка входа. Так куда же мы поставим наш css?

Создаем style.css в нашей папке ./src:

Не забываем включить это в .js файл:

В webpack создайте новое правило для файлов css:

в терминале запустите:

Необходимо использовать ExtractTextPlugin для компиляции нашего css. Как видите, для .css. мы также добавили новое правило.

Краткое описание обычной работы правил:

**Нам необходимо использовать ExtractTextPlugin, потому что webpack по умолчанию понимает только формат .js. ExtractTextPlugin получает ваш .css и извлекает его в отдельный .css-файл в вашем каталоге ./dist.
**

Спойлер: в некоторых статьях вы найдете, что ExtractTextPlugin не работает с webpack 4, но у меня он работал Это доказывает мою точку зрения о неоднозначности модулей при настройке, и если у вас это совсем не работает, вы можете переключиться на MiniCssExtractPlugin. Далее в этой статье я покажу вам, как настроить и его тоже.

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

Чтобы ее исправить, запустите:

Совет: «гуглите» вылезающие ошибки и ищите подобные вопросы в GitHub, или просто задайте свой вопрос на StackOverflow.

Затем ваш css код должен скомпилироваться в ./dist/style.css

На данном этапе dev-зависимости в моем package.json выглядят так:

Обратите внимание, что иная комбинация может не работать, поскольку даже обновление webpack-cli v2.0.12 до 2.0.13 может «сломать» ее. #justwebpackthings

Теперь ваш style.css должен выводиться в папку ./dist:

##Поддержка настройки SCSS

Очень часто разрабатываются веб-сайты с SASS и POSTCSS, они весьма полезны. Поэтому мы сперва включим поддержку SASS. Переименуем наш ./src/style.css и создадим другую папку для хранения файлов .scss. Теперь необходимо добавить поддержку форматирования .scss.

Замените style.scss на ./scss/main.scss в файле .js.

Теперь давайте создадим .html-шаблон файла. Добавьте файл index.html в *./src *с точно такой же структурой.

Чтобы использовать этот файл в качестве шаблона, нам понадобится html-плагин.

Добавьте его в ваш вэбпак-файл:

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

Чтобы убедиться, что все работает, удалите все файлы из папки ./dist и саму папку. Затем запустите dev-скрипт

Вы увидите, что появилась папка ./dist, и в ней 3 файла: index.html, style.css, script.js.

##Кэширование и Хеширование

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

Поскольку этот пост затрагивает главным образом конфигурацию webpack — одним из самых популярных способов решения проблем кеширования является добавление хеш-номера в активные (находящиеся в разработке) файлы (asset), такие как style.css и script.js. Об этом можно почитать здесь. Хеширование необходимо, чтобы браузер «научился» запрашивать только измененные файлы.

Webpack 4 имеет встроенные функции, реализованные через chunkhash. Это можно сделать следующим образом:

В файл ./src/index.html добавьте:

С помощью такого синтексиса ваш шаблон «научится» использовать хэшированные файлы. Это новая «фича», реализованная после возникновения этой проблемы.

Мы будем использовать описанный там htmlWebpackPlugin.files.chunks.main.

Теперь в нашей папке ./dist есть файл index.html:

Далее, если мы ничего не изменим в файлах .js и .css и запустим:

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

##Проблемы с хэшированием и их решения

Хотя у нас есть рабочий алгоритм, но он пока не идеален.
Что, если изменить код в файле .scss? Окей, меняем .scss и снова запускаем dev-скрипт. Теперь новый хэш файла не генерируется.

Что, если мы добавим новый файл console.log в наш .js-файл вот так:

Если вы снова запустите dev-скрипт, увидите, что в обоих файлах обновлен хэш-номер.

Эта известная проблема, и даже описан вопрос на StackOveflow.

##Как теперь это исправить?

Перепробовав немало плагинов, якобы решающих эту проблему, я, наконец, пришла к двум типам решений:

Замените [chukhash] на простой [hash] в .css. Это было одно из решений проблемы. Это похоже на конфликт с webpack 4.3, в котором введена собственная переменная [contenthash]. Используйте плагин: webpack-md5-hash.

Теперь, когда вы вносите изменения в свой файл main.scss и запускаете скрипт dev, с новым хэшем должен быть сгенерирован только новый style.css.

Далее протестируем .js-файлы. Теперь оба файла меняют хэш.

Мастер Йода рекомендует:  Зачем нам нужен SSI

Все еще могут остаться некоторые конфликты, поэтому теперь попробуем подключить плагин mini-css-extract.


Плагин Mini CSS предназначен для замены плагина extract-text и в дальнейшем для обеспечения лучшей совместимости.

Я реструктурировала свой webpack-файл, чтобы скомпилировать style.css с /mini-css-extract-plugin и у меня все работает.

Теперь, когда я редактирую main.scss, генерируется новый хеш для style.css. Также когда я редактирую css, меняются только хэши css, и когда я редактирую ./src/script.js, меняются только хэши script.js!

Чтобы выходной файл .css был безупречным, мы можем добавить PostCSS.

PostCSS предоставляет вам autoprefixer, cssnano и другие приятные и удобные штуковины. Буду продвигать то, что использую регулярно. Нам понадобится postcss-загрузчик. Также по мере необходимости установим autoprefixer.

Спойлер: для рационального использования PostCSS вам не требуется webpack, есть довольно приличный плагин post-css-cli, который позволяет вам использовать его в npm-скрипте.

Создайте postcss.config.js, где вам требуюся соответствующие плагины, вставьте

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

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

Загрузчик использует плагины от начала до конца. (справа-налево — прим.переводчика)

Вы можете протестировать autoprefixer, дополнив код в ваших .scss-файлы и проверив вывод. Существует также способ исправить выход, указав, какой браузер вы хотите поддерживать в файле .browserslistrc.

Я бы посоветовала вам https://www.postcss.parts/ для изучения плагинов, доступных для PostCSS, например:
— utilities
— cssnano
— style-lint

Я буду использовать cssnano для минимизации моего выходного файла и css-mqpacker для упорядочения медиа-запросов. Я также получила несколько подобных сообщений:

При желании можете попробовать cleancss.

Ваш package.json на этом этапе должен иметь следующую структуру:

Чтобы сохранить зависимости, для установки модулей рекомендую использовать **yarn вместо npm. Короче говоря, yarn жестко фиксирует версию пакета, и при переустановке модулей вы сможете избежать многих неожиданных несовместимостей.** (*Npm теперь тоже так умеет, тут я ошиблась)

Мы можем попробовать импортировать clean-webpack-plugin, чтобы перед регенерацией файлов очистить нашу папку ./dist.

Теперь, когда у нас есть чистенькая и аккуратная конфигурация, мы будем «жечь»!

В этой статье я предоставила вам свой файл конфигурации и его пошаговую настройку. Примечание: поскольку к моменту, когда вы прочтете это, могут измениться многие npm зависимости, то одна и та же конфигурация у вас может не заработать! Прошу вас указать в комментариях ваши ошибки, чтобы после я могла их исправить. Сегодня 05.04.2020.

Введение в философию Webpack

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

Введение

В последние несколько лет, в индустрии web-разработки наблюдается постоянный рост одностраничных приложений (SPA), много автономных приложений, которые можно установить на компьютер, предлагающих полноценный функционал для пользователя. К сожалению, как известно, чем больше функций вы добавляете, тем больше кода приходится писать и, учитывая среднюю сложность SPA, в конце концов вы достигните точки, где ваш код может состоять из сотен, если не тысяч .js , .css и многих других файлов.

Поэтому возникает следующая проблема: как вам справиться с кодовой базой такого размера? Как управлять порядком загрузки файлов/модулей, делающих ваше приложение работоспособным, когда у вас их так много? В старые времена это было значительно легче. Вы бы вставили теги script в определенном порядке в тело вашего html. Так, например, если в файл B должен быть загружен после файла A и файл C должен быть загружен после A и B , вероятно, вы делали бы что-то подобное:

По мере усложнения приложения, количество этих файлов будет расти и управление зависимостями будет постоянно усложняться. Что если ваш файл B нужно заргузить после другого файла D , который, в свою очередь, должен быть загружен после другого файла E , и файл A также должен быть после загрузки файла D ? Вы, наверное, уже немного запутались, а у нас до сих пор только 5 файлов.

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

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

Видео курс по WebPack 4+

WebPack – это пакет модулей JavaScript с открытым исходным кодом, преимущественно для JavaScript, но он может преобразовывать внешние ресурсы, такие как HTML, CSS и изображения, если включены соответствующие плагины. Возможности данной программы весьма впечатляют. Если Вы хотите войти в мир современной web-разработки, то без данного сборщика Вам не обойтись. Посмотрите простые и понятные видео уроки по вебпак, которые откроют мир разработки заново и помогут перейти на новый уровень уже после полутора часов видео.

Содержание видео курса:

Урок 1. Настройка и установка Webpack
Урок 2. Модули и оптимизация сборки
Урок 3. Плагины и создание HTML-файла
Урок 4. Работа с библиотеками
Урок 5. Работа со стилями
Урок 6. Стили в отдельном файле
Урок 7. Webpack Dev Server
Урок 8. Настройка Babel
Урок 9. Компиляция Less
Урок 10. Компиляция Sass
Урок 11. Компиляция React JSX
Урок 12. Компиляция TypeScript

#2 — Установка Webpack, начало работы

Всем привет! Меня зовут Ковальчук Дмитрий. Вы смотрите Лофтскул. Мы продолжаем изучать Webpack и сейчас мы с вами вместе, шаг за шагом, создадим наше первое веб-приложение.

1. Подготовка проекта

Создадим новую директорию для нашего приложения.

При помощи пакетного менеджера Yarn создадим package.json файл для управления зависимостями проекта.

Инициализируем git-репозиторий и настроим файл .gitignore

В список исключений мы добавим две директории: папку с зависимостями проекта и скрытую папку с рабочими файлами phpstorm.

Перед тем, как начать работать с Webpack, давайте сделаем наш первый коммит. Это отличная практика, которая приучит нас писать код последовательно и аккуратно.

2. Установка Webpack

Согласно документации, Webpack не рекомендуется ставить глобально (чтобы избежать возможной несовместимости версий Webpack для разных приложений на вашем компьютере). Достаточно установить его локально.

Проверим, добавился ли вебпак в «devDependencies»

Отлично. Давайте теперь создадим файл конфигурации для Webpack. Все необходимые инструкции мы будем писать именно в нём.

3. Запуск Webpack при помощи npm-скриптов

Запускать Webpack мы будем при помощи так называемых npm-скриптов — это стандартная рекомендованная практика. При чём в нашем случае мы вместо npm будет пользоваться Yarn. Надеюсь, вы уже освоили этот пакетный менеджер. Если нет — посмотрите соответствующее видео на лофтскул.

Npm-скрипты работают очень просто. В блоке scripts файла package.json мы пишем в формате «ключ» — «значение» слева — название скрипта (оно может быть любое, на наш вкус), а справа то, что должно быть запущено.

Для запуска скрипта используется команда «run»

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

4. Создание первых javascript-модулей

Создадим папку «source» и в ней 2 javascript-файла «index.js» и «menu.js».

В файл menu.js мы поместим функцию, которая будет создавать список пунктов меню. Эта функция принимает 2 параметра: первый — массив пунктов меню, второй — класс, который нужно присвоить тегу ˂ul˃. После вызова данная функция будет возвращать html-элемент, а именно ненумерованный список, правда, без ссылок. Вы можете усовершенствовать эту функцию самостоятельно, однако в наших целях простого списка будет вполне достаточно.

Кстати, перед нами самый настоящий ES6-модуль — изолированный и аккуратный код, который можно использовать из проекта в проект, если будет необходимо. Необходимо отметить, что поддержка ES6-модулей появилась в Webpack начиная со второй версии, т.е. нам нет необходимости подключать babel в данном случае. Всё и так будет работать.

Ключевое слово export, стоящее перед объявлением функции, экспортирует данную функцию в остальную часть приложения. Ключевое слово default говорит о том, что мы экспортируем только одно значение, по умолчанию.
Если это пока для вас сложно, не волнуйтесь. Вы достаточно быстро привыкнете.

Следующий модуль index.js. В него мы импортируем функцию переданную во вне по умолчанию из menu.js и сразу присваиваем ей имя “createMenu”. При этом мы можем не указывать “.js” — webpack и так поймёт, что мы имеем ввиду.

Давайте создадим меню, состоящее из 3х пунктов …. Для удобства стилизации присвоим меню класс «menu».

5. Создаём html-файлы при помощи html-webpack-plugin

Для создания html-файлов и работы с шаблонами мы будем использовать плагин html-webpack-plugin.
Установим плагин при помощи Yarn. Не забудем флаг -D, чтобы зависимость была сохранена в devDependencies файла-манифеста. Туда же, где сохранён вебпак.

В webpack.config.js мы поместим следующий код. Я сэкономлю ваше время, сейчас и далее я не буду тратить время на тайпинг. Вместо этого постараюсь объяснить уже набранный код.

Пояснения:

— “сonst” — это ES6-альтернатива для “var”, указывающая, что переменная не должна быть изменена. Node.js полностью поддерживает эту часть ES6, т.е. в данном случае я также могу обойтись без babel.

— “path” — это базовый модуль node.js, который поможет нашему приложению работать корректно (одинаково) на разных платформах (например, windows или linux), т.к. они по разному определяют пути к файлам.

— “PATH” — объект, в который мы поместили 2 свойства: “source” — исходники приложения и “build” — папка, в которую будут помещаться результаты работы Webpack.

— “module.exports” — экспорт модуля в node.js. Внутри него мы пишем такие настройки Webpack, как entry, output, plugins и пр.

— “entry” — точка входа нашего приложения. Для многостраничного сайта можно сделать отдельные точки входа для каждой страницы. Запомните, что точками входа могут являться только те модули, которые не используются другими модулями вашего приложения. Так, например, наш модуль index.js использует другой модуль — menu.js. Но сам index.js не используется больше никаким модулем.

— “output” — описывает имена файлов и директорию — результат работы Webpack.

— “[name]” — это плейсхолдер, в него автоматически будут подставляться имена точек входа “entry” нашего приложения. А у нас их будет несколько. Но об этом позже.


— “plugins” — в этом разделе перечисляются плагины, которые кастомизируют процесс сборки Webpack. В нашем случае, это всего один плагин, который создает HTML-файл с заданным тайтлом.

Форум

Справочник

Поиск по форуму
Расширенный поиск
К странице.

Добрый день.
Осваиваю вебпак. Всё работает нормально, кроме автотестов (Mocha / chai).

В mode production переименовывает названия функций, понятно почему не работают автотесты.

В mode development функции вроде не переименовывает, но тесты всё равно не работают — ошибка ‘функция is not defined’.

Как сделать, чтобы тесты работали с вебпаком?

bundle your

MODULES WITH DEPENDENCIES

Write Your Code

src/index.js

src/bar.js

Bundle It

Without config or provide custom webpack.config.js

page.html

Then run webpack on the command-line to create bundle.js .

Awesome isn’t it? Let’s dive in!

Get Started quickly in our Guides section, or dig into the Concepts section for more high-level information on the core notions behind webpack.

Support the Team

Through contributions, donations, and sponsorship, you allow webpack to thrive. Your donations directly support office hours, continued enhancements, and most importantly, great documentation and learning material!

Webpack на практике: с нуля до создания автотестов

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

Для этих целей, вы можете использовать такие системы для автоматизации задач, как Grunt или Gulp, создавая цепочку таких преобразования, которые, например, минимизируют ваш CSS или JavaScript код, соединять в единый файл и т.д.

Подобные инструменты крайне популярны и очень полезны. Есть, тем не менее, другой способ произвести подобные действия, которые реализуется с помощью Webpack.

Именно об этом способе мы поговорим в статье.

Что такое Webpack?

Webpack можно охарактеризовать, как “сборщик модулей”. Он берет JavaScript модули с необходимыми зависимостями, и затем соединяет их вместе как можно более эффективным способом, на выходе создавая единый JS-файл. На первый взгляд – ничего особого, не так ли? Например, такие инструменты, как RequreJS позволяют делать подобные вещи вот уже много лет.

Мастер Йода рекомендует:  XBox — всё по этой теме для программистов

Весь трюк заключается вот в чем. Webpack не ограничен в использовании только JavaScript модулей. Применяя специальные Загрузчики, Webpack понимает, что JavaScript модулям могут потребоваться для их работы, например, CSS файлы, а им, в свою очередь, изображения. При этом, результат работы Webpack будет содержать только те ресурсы, которые действительно нужны для работы приложения.

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

Установка Webpack

Как и большинству инструментов Web-разработчика, Webpack требует для своей работы установленный Node.js. Если Node.js у вас уже настроен, то все, что нужно сделать для установки Webpack – это выполнить следующую команду в консоли:

Данная команда установит Webpack глобально в вашей системе, что позволит запускать его из любого места. Далее, внутри директории нашего проекта, создадим файл index.html с начальной разметкой:

Важной частью этого кода является ссылка на файл bundle.js , который будет содержать в себе результат работы Webpack. Также обратите внимание на пустой элемент h2 – он нам пригодится позднее.

Теперь создадим пару файлов в корневой директории проекта. Имя первого файла будет main.js и он послужит входной точкой для приложения. Второй файл назовем, например, say-hello.js . В него мы поместим простой код модуля, который будет принимать имя человека, DOM-элемент и выводить приветственное сообщение.

После того, как мы создали наш небольшой модуль, вызовем его из main.js . Сделать это очень просто:

Если бы мы сейчас открыли в браузере наш HTML-файл, то никакого вывода сообщения не произойдёт, т.к. мы ни подключили файл main.js , ни произвели сборку зависимостей для браузера. Всё, что нам нужно сделать – это указать Webpack на main.js файл, чтобы он подтянул все зависимости. Если это сделать, то Webpack произведет сборку этих файлов в единый файл bundle.js , который мы сможем использовать в браузере.

Вернемся в терминал, и просто выполним такую команду:

Первый файл определяет начальную точку приложения, в которой Webpack будет искать все зависимости. Это сработает и в том случае, если в вызываемых зависимостях есть свои зависимости от других модулей – до тех пор, пока не подключатся абсолютно все необходимые модули. Таким образом, на выход получится один файл bundle.js со всем модулями.

После выполнения этой команды, в консоли должен быть, примерно, вот такой результат:

Теперь откройте index.html в браузере, и вы увидите результат работы приложения.

Настройка Webpack

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

После этого достаточно всего лишь ввести команду webpack и мы получим такой же результ.

Локальный сервер для разработки

Как известно, если что-то может быть автоматизировано, то почему этого не сделать? Пусть программа делает за нас всю рутинную работу, например, следит за изменениями в коде, и сама обновляет страницу в браузере. Давайте установим небольшой сервер для разработки, чтобы процесс создания программы проходил более эффективно. В терминале выполним команду установки:

А затем запустим сервер командой webpack-dev-server . Эта команда старует простой Web-сервер, который будет обслуживать текущую директорию нашего проекта. Откроем в браузере новую вкладку по ссылке http://localhost:8080/webpack-dev-server/, и, если всё сделано правильно, то мы увидим примерно следующее:

Теперь у нас есть не только этот замечательный сервер, но и немного магии, благодаря которой, при любом изменении в коде приложения, будет произведена пересборка проекта и обновлена страница в браузере. И всё работает практически без какой-либо дополнительной настройки.

Попробуйте, например, изменить передаваемое имя в sayHello функцию, и вы увидите, как изменения немедленно происходят в окне браузера.

Загрузчики

Одной из самых важных особенностей Webpack, является возможность использовать Загрузчики. Загрузчики являются аналогами “задач” (tasks) в Grunt и Gulp. По существу, они принимают содержимое файлов, а затем преобразуют его необходимым образом и включают результат преобразования в общую сборку.

Например, нам бы хотелось использовать некоторые возможность ES2015 в нашем коде. ES2015 – это новая версия JavaScript, которая полностью не поддерживается в браузерах. Поэтому, нам необходимо использовать Загрузчик для трансформации нашего ES2015 кода в старый ES5, который работает во всех браузерах. Чтобы сделать это, мы будем использовать одни из самых популярных Загрузчиков – Babel, и в соответствии с инструкцией, установим его командой:

Но прежде не забудем инициализировать npm командой npm init .

После установки Babel, у нас будет не только Загрузчик, но и все нужные для работы зависимости, пресеты для ES2015, чтобы Babel знал тип JavaScript для преобразования. Теперь, когда Загрузчик установлен, нам необходимо указать Babel конфигурацию для его использования. Обновим файл webpack.config.js :

В этом коде есть несколько важных вещей, на которые стоит обратить внимание. Строчка с кодом test: /\.js$/ является регулярным выражением, которым мы указываем применение данного Загрузчика только к .js файлам. Подобно этому, мы исключаем директорию node_modules с помощью кода exclude: /node_modules/ . В строках кода loader и query всё ясно само по себе – используем загрузчик с именем Babel и применяем пресет для ES2015.

Остановим наш веб-сервер комбинацией клавиш Ctrl+C и снова выполним команду webpack-dev-server . Теперь протестируем работу Загрузчика и напишем немного ES6 кода. Изменим в файле main.js вызов модуля на присвоение возвращаемого результата в константу вместо переменной:

После сохранения, Webpack должен самостоятельно пересобрать наше приложение и обновить страницу в браузере. В результате, на первый взгляд, ничего не изменилось. Но если мы взглянем на содержимое файла bundle.js , то найдем, что написанный нами ES6 код преобразовался с помощью Babel в старый добрый JavaScript.

Во второй части…

В продолжении этой статьи, мы посмотрим на то, как использовать Webpack для обработки CSS и изображений, а также, как подготовить приложение для размещения его на боевом сервере.

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

Как с нуля создать проект на React, используя Webpack 4 и Babel

Недавно я начал изучать React и для создания проектов я использовал create-react-app, чтобы быстро и без особых усилий добиться желаемого результата. Я подозреваю, что вы тоже используете create-react-app или react-slingshot для создания приложений на React. Ничего не имею против этих инструментов — они хорошо справляются с конфигурацией, в то время как у вас есть возможность сосредоточиться на самом React. Но таким ли способом вы хотите изучить React?

Скорее всего нет, иначе вы бы не читали эту статью.

Начало работы:

Перед тем как мы начнем, вам нужно установить менеджер пакетов nmp на свой компьютер. Он входит в состав Node.js, который вы можете скачать отсюда.


Файловая структура:

Файловая структура для приложения на React

Вы можете создать указанные выше каталоги с помощью этих команд:

Инициализация проекта:

Все проекты, которые используют nmp, должны быть инициализированы. Для инициализации проекта — введите следующую команду в терминале:

Это создаст файл package.json

Вам будет предложено ответить на вопросы, касающиеся проекта. Вы можете пропустить их, нажав enter. Если вы хотите пропустить все вопросы разом — добавьте флажок -y:

Теперь файл package.json будет выглядеть примерно так:

Установка Webpack:

Webpack — это модульный сборщик, который позволяет объединять ресурсы и библиотеки, необходимые для проекта, в один файл. Давайте добавим Webpack в наш проект:

Вышеупомянутая команда добавит webpack и webpack-cli в наш проект , в качестве зависимости dev. Мы установили webpack-cli, чтобы у нас появилась возможность использовать webpack в командной строке.

Установка React:

Установим react и react-dom в качестве зависимости.

Установка Babel:

Для того чтобы React работал, необходимо вместе с ним установить Babel. Он поможет в транспайлинге ES6 и JSX в ES5.

Установите babel-core, babel-loader, babel-preset-env, babel-preset-react в качестве зависимости dev.

  • babel-core: Преобразует код ES6 в ES5.
  • babel-loader: Помощник Webpack для транспайлинга кода, задает пресеты.
  • babel-preset-env: Пресет, который помогает babel конвертировать код ES6, ES7 и ES8 в код ES5.
  • babel-preset-react: Пресет, преобразующий JSX в JavaScript.

Index.js:

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

Этот файл будет точкой входа в наше приложение.

Index.html:

Создайте файл index.html внутри корневой папки / src папки и добавьте в него следующий код:

Entry и Output файл:

Создайте webpack.config.js в корневом каталоге проекта, чтобы мы могли определить наши webpack loaders.

Определите точку входа и выходной каталог нашего приложения внутри webpack.config.js

В приведенном выше коде, Webpack объединит все наши JavaScript файлы в файл index-bundle.js внутри каталога /dist.

Webpack Loaders:

Теперь добавьте в этот файл loaders, которые будут ответственны за загрузку и объединение исходных файлов.

Внутри webpack.config.js добавьте следующие строки кода:

Здесь babel-loader используется для загрузки наших JSX/JavaScript файлов, css-loader для загрузки и объединения всех CSS файлов в один, а style-loader добавит все стили внутрь тега документа style.

Прежде чем Webpack сможет использовать css-loader и style-loader, мы должны установить их в качестве зависимости dev:

Имейте в виду, что Webpack выполняет loaders в обратном порядке: с последнего до первого, то есть справа налево.

.babelrc:

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

Данный файл сообщит babel, какие из пресетов использовать для транспайлинга кода. Здесь мы используем два пресета:

  • env: Этот пресет используется для транспайлинга кода ES6/ES7/ES8 в ES5.
  • react: Этот пресет используется для транспайлинга кода JSX в ES5.

Компиляция файлов с помощью Webpack:

Добавьте следующие строки кода в объект script файла package.json, как показано ниже:

Здесь я воспользовался флажком watch, поэтому всякий раз, когда происходит изменение исходных файлов, webpack автоматически скомпилирует все исходные файлы.

В Webpack 4 есть два режима: режим production, который создает оптимизированные файлы, готовые к использованию в режиме production и режим development, который создает легко читаемый код. Флажок —mode позволяет выбрать, какой режим использовать.

Теперь вы можете скомпилировать проект, воспользовавшись следующей командой:

После выполнения вышеприведенной команды, вы увидите файл index_bundle.js, созданный в каталоге /dist . Файл будет содержать код ES5 из файла index.js.

App.js

Создайте файл App.js внутри папки components, находящейся в папке src , со следующим содержимым внутри него:

App.css:

Создайте файл App.css внутри папки styles, находящейся в папке src , со следующим содержимым внутри него:

Данный CSS файл используется, чтобы убедиться, что css-loader и style-loader работают корректно.

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

Установка Html-webpack-plugin:

Теперь нам нужно установить html-webpack-plugin. Этот плагин генерирует HTML файл, затем вставляет в него скрипт и записывает файл на dist/index.html.

Установите html-webpack-plugin, в качестве зависимости dev:

Теперь нам нужно настроить этот плагин внутри файла webpack.config.js,добавив в него следующий код:

В каталоге /dist мы создаем файл шаблона index.html с введенным скриптом.

Установка почти завершена, осталось скомпилировать исходные файлы с помощью webpack. Вы можете запустить проект, используя следующую команду:

Вы получите выходные данные внутри каталога /dist. Откройте index.html в браузере и вы увидите текст “My React App!”.

У этого подхода есть один недостаток: вам нужно каждый раз вручную обновлять веб-страницу, чтобы увидеть сделанные вами изменения. Чтобы webpack обновлял веб-страницу всякий раз, когда какие-либо изменения вступают в силу, мы можем установить webpack-dev-server.

Установка Webpack-dev-server:

Установите webpack-dev-server, в качестве зависимости dev:

И измените скрипт start в файле package.json, как показано ниже:

Я добавил два флажка —open и —hot , которые ответственны за обновление веб-страницы всякий раз, когда происходят какие-либо изменения в компонентах.

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

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

Output in a browser window

Вот и все, теперь у нас есть собственный boilerplate (шаблон) React, который мы можем использовать для создания наших проектов на React. Также вы можете скачать данный шаблон с моего Github.

Добавить комментарий