Webpack 4 практические рекомендации по настройке


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

Скринкаст по Webpack

Webpack — один из самых мощных и гибких инструментов для сборки frontend.

Вместе с тем, он достаточно сложен, а документация оставляет желать много лучшего.

Поэтому я записал этот скринкаст о том, как его использовать.

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

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

В первых частях скринкаста используется модуль babel-loader версии 5, который ставится через «npm i babel-loader@5» .

Текущая версия это Babel 7. Чтобы её использовать, поставьте несколько модулей:

Затем замените настройки babel-loader’а в конфиге на такие (для адаптации под браузеры с долей более 3%):

Favicon

Блог по web технологиям. Веб студия г. Воронеж. Создание и поддержка сайтов на заказ.

  • Главная
  • /
  • Фронтенд
  • /
  • Webpack: основы. Как настроить проект с JavaScript и Sass

Webpack: основы. Как настроить проект с JavaScript и Sass

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

Webpack — инструмент веб-разработчика, который соединяет JavaScript- и CSS-файлы в единое целое — файл, который часто называется «bundle» (с англ. «пачка»). В этой статье представлена инструкция по настройке среды для проекта на JavaScript и Sass.

Webpack 4: практические рекомендации по настройке

Providing the mode configuration option tells webpack to use its built-in optimizations accordingly.

string = ‘production’: ‘none’ | ‘development’ | ‘production’

Usage

Just provide the mode option in the config:

or pass it as a CLI argument:

The following string values are supported:

Sets process.env.NODE_ENV on DefinePlugin to value development . Enables NamedChunksPlugin and NamedModulesPlugin .

Option Description
Sets process.env.NODE_ENV on DefinePlugin to value development . Enables NamedChunksPlugin and NamedModulesPlugin .

Sets process.env.NODE_ENV on DefinePlugin to value production . Enables FlagDependencyUsagePlugin , FlagIncludedChunksPlugin , ModuleConcatenationPlugin , NoEmitOnErrorsPlugin , OccurrenceOrderPlugin , SideEffectsFlagPlugin and TerserPlugin .

Sets process.env.NODE_ENV on DefinePlugin to value production . Enables FlagDependencyUsagePlugin , FlagIncludedChunksPlugin , ModuleConcatenationPlugin , NoEmitOnErrorsPlugin , OccurrenceOrderPlugin , SideEffectsFlagPlugin and TerserPlugin .

Opts out of any default optimization options

Opts out of any default optimization options

If not set, webpack sets production as the default value for mode .

Please remember that setting NODE_ENV doesn’t automatically set mode .

Пример простого webpack-конфига с babel, sass и dev-server

Обновлено 10.05.2020

Обновлены зависимости.
Основные изменения:

  • Добавлена поддержка неограниченного количества html-файлов
  • Исправлен конфликт с путями svg-шрифтов и svg-картинок

Обновлено 08.09.2020

Обновлены зависимости.
Основные изменения:

  • Добавлен Babel 7
  • Добавлен autoprefixer и cssnano
  • Добавлена поддержка optional chaining и nullish coalescing operator

Обновлено 08.05.2020

Webpack обновлен до версии 4.8.1
Extract-text-plugin заменен на mini-css-extract-plugin

Обновлено 15.03.2020

Конфиг стал проще и функциональнее. Изменения:

  • Webpack обновлен до 4й версии. Одно из его главных преимуществ — скорость сборки почти в два раза выше(!), чем в предыдущих версиях
  • Добавлен HtmlWebpackPlugin, так что теперь файл index.html автоматически переносится в папку public при сборке, при этом в этот файл автоматически добавляются пути к скриптам и стилям
  • Для определения режима работы конфига (для разработки, или для продакшена) используется стандартный флаг —mode
  • Очистка файлов предыдущей сборки перенесена из конфига на уровень npm-скриптов
  • В режиме разработки, вкладка с сервером открывается автоматически (флаг open: true )

Описание конфига

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

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

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

Также реализована минификация JS и CSS файлов при сборке на продакшен.

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

Запуск конфига

npm start — разработка
npm run build — «продакшен»

Введение в 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-файл с тегами

#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-файл с заданным тайтлом.

Настройка webpack + babel (yarn / npm)

Настройка webpack + babel (yarn / npm)

1. Необходимо установить node.js
2. Необходимо установить yarn

Генерируем файл package.json

Автоматическая генерация файла

Ручная генерация с вводом параметров

Установка и настройка webpack

Локальная установка webpack

После добавляем в файл package.json строки

Примерный вид того, что должно получиться (при использование yarn)

Установим необходимые плагины для webpack

Устанавливаем через командную строку

Команды для yarn

Команды для node.js

Настройка конфига webpack

Необходимо создать файл webpack.config.js в корневой директории вашего проекта.

Структура проекта

Структура сборщика проекта должна получится следующей

-Корневой каталог проекта

Недостающие файлы и папки необходимо создать

Запуск и тестирование сборщика проекта

Добавим код в src/index.html

В src/index.js добавим

Для сборки проекта в консоли прописываем

После выполненной команды в корневой директории появится папка dist со собранным проектом

Введение в Webpack для новичков

Что такое 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-файл с тегами

Webpack 4 — Как настроить минимизацию?

Webpack 4 поставляется со следующим утверждением:

webpack.optimize.UglifyJsPlugin удален, используйте вместо этого config.optimization.minimize.

Достаточно справедливо, но я не могу найти никакой информации о настройке экземпляра UglifyJsPlugin под капотом, например, для изменения каталога кеша. Это можно сделать?

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

Вы можете использовать optimization.minimizer настройку для создания экземпляра собственного UglifyJsPlugin , однако. Используя 4.0, мы использовали этот пример для получения исходных карт, даже если mode установлен на ‘production’ например (больше не требуется по 4.1.1):

Для тех, кто пришел за мной, понял, что эта вводящая в заблуждение ошибка не связана с моей правильной конфигурацией веб-пакета, но на самом деле offline-plugin устарел и вызывает эту проблему. Это нужно было обновить. См. Проблему GitHub: https://github.com/webpack-contrib/uglifyjs-webpack-plugin/issues/234#issuecomment-369134047.

Вы можете попробовать это

Без добавления uglifyjs-webpack-plugin вы можете просто добавить это в конец своего файла webpack.prod.config.js :


Вы должны проверить опцию p : https://webpack.js.org/guides/production/#cli-alternatives: этот флаг сообщает Webpack об оптимизации вашей сборки для производственной среды. Вы можете использовать его с новым «производственным» mode для небольшой сборки.

Посмотрите другие вопросы по меткам javascript webpack web webpack-4 или Задайте вопрос

webpack

Преимущества webpack:

  1. Webpack поддерживает модули AMD прямо из коробки (иначе говоря берем AMD-модули (в стиле require) и начинаем использовать)
  2. webpack поддерживает и модули AMD (в стиле requireJS), и модули CommonJS (в стиде nodejs) одновременно.

2.1 Простая сборка — Простой конфиг

Устанавливаем глобально: npm i -g webpack

Создаем файл webpack.config.js. В этом файле в module.exports экспортируем объект конфига.

webpack.config.js:

jQuery or Javascript

Запускаем сборку, в консоли для проекта:

Установим простейший сервер статики:

npm I –g node-static

Запускаем его в нужной директории:

По выданному адресу будет показано содержимое директории

2.2 Простая сборка — Внешний доступ к модулям

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

  1. Во-первых сделаем exports ( exports.welcome = welcome; ) в файле home.js.
  2. В webpack.config добавим опцию library ( library: «home» ), exports модуля будет помещен в переменную home .

2.3 Простая сборка — Пересборка при изменениях

Опция watch: true в webpack.config следит за файлами и при их изменении перезапускает сборку. Например, EnvironmentPlugin будет передавать в итоговый код наши переменные.

2.4 Простая сборка — Source maps (Отладка)

Debugger; сработает непосредственно в сборке, что неудобно. Есть решение – source maps . При помощи параметра devtool (значения которого позволяют строить source map по разному, http://webpack.github.io/docs/configuration.html#devtool) можно указать, что нужна source map. Теперь вы можете отслеживать изменения (debugger) для каждого файла (модуля).

2.5 Простая сборка — Окружение, NODE_ENV

В конфиге установлено watch: true . Однако в реальной жизни необходимо запустить webpack минимум 2 раза: для разработки (например, с watch: true) и для «боя» (просто сборка).

Традиционный способ переключаться между development и production это использовать Переменные окружения.

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

В nodejs традиционно используется NODE_ENV . Информация о сборке может находиться и внутри самих скриптов. То есть наши модули могут содержат свои отладочные средства, которые включаются только в development и помогают нам в отладке. Как этого добится:

  1. Использовать плагин (понадобится плагин, для этого локально (для проекта) установим webpack: npm i webpack , так как мы собираемся импортировать модули из webpack)
  2. const webpack = require(‘webpack’);
  3. В webpack есть достаточно много плагинов (http://webpack.github.io/docs/list-of-plugins.html). Нам потребуется EnvironmentPlugin. Передаем те ключи окружения, которые хочется сделать доступными клиенту.
  4. Чтобы передавать клиенту непосредственно переменную NODE_ENV , а не свойство process.env , понадобится другой плагин: DefinePlugin

jQuery or Javascript

2.6 Babel.js

Мы настроим загрузчик Babel для всех файлов JavaScript, чтобы транскомпилировать код на ES6 в код старой версии JavaScript, который смогут понять нынешние браузеры. http://frontender.info/packing-the-web-like-a-boss/#nazadvbudushtee – пример webpack с babel-loader (package.json)

Общепринятый способ использовать кроссбраузерно современный js это babel. http://babeljs.io/ — получает современный js и превращает его в более старый/кроссбраузерный.

Для использования babel в нашем приложении воспользуемся концепцией loader ’ов, которую предоставляет webpack.

jQuery or Javascript

Здесь говорится, что к файлам, которые оканчиваются на js нужно применять babel-loader. Loader это модуль. Устанавливаем npm i babel-loader .

Попадаем в репозитория модуля: npm repo babel-loader .

Как настраивать loaders: http://webpack.github.io/docs/configuration.html#module-loaders/. Свойство test на соответствие расширений, свойство include для проверки путей (префиксы путей), exlude те регулярные выражения или префиксы путей к которым loader не применим, свойство loader – наименование loader.

a. Resolving

Resolve (модули вообще, например, “ ./home ”) и resolveLoader (для loader’ов) это пара настроек, которые описывают как webpack ищет модули.

b. Минификация

Для этого будем использовать плагин, который есть в webpack – UglifyJsPlugin .

jQuery or Javascript

3.1 Несколько точек входа

На текущей момент home.js собирается в build.js и все в одной директории (в реальности все по другому). Обычно есть директория, которая содержит файлы для разработки – frontend; и директория, в которой собирается проект – public.

Создадим еще 1 точку входа. Зачастую на сайте существует несколько разделов, например, поиск, магазин, о нас и т.д. Поэтому нам не нужно, чтобы 1 js файл содержал весь функционал сайта. То есть для каждого раздела будет загружаться свой необходимый функционал.

Работаем с config:

jQuery or Javascript

Все модули находятся в директории frontend. __dirname Чтобы не дублировать используем параметр context :

jQuery or Javascript

Соответственно поиск будет идти относительно нее.

jQuery or Javascript

Если некий файл является точкой входа, то require (nodejs) его ниоткуда нельзя.

3.2 NoErrorsPlugin

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

3.3 CommonChunkPlugin

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

jQuery or Javascript

Где name — имя нового кусочка сборки.

Далее при сборке появится 3 файла about.js, home.js, common.js. common.js содержит те модули, которые используются во всех точках входа. Соответственно, для всех точек входа нужно подключить общий код:

3.4 Информация о сборке

Чтобы посмотреть подробнее какой модуль куда пошел можно запустить:

About.js пошел в 0 ( <0>) фрагмент сборки. home.js в <1>.

webpack —display-modules -v

С помощью красивой графической утилиты:

webpack —json —profile >stats.json

этим мы создадим файл stats.json. Далее заходим на http://webpack.github.io/analyse/ и подставляем stats.json.

3.5 Настройки CommonsChunkPlugin

  • name – имя
  • filename — имя файла, в который запишется общий код. По умолчанию:
    filename: “[name].js”
  • minChunks – по умолчанию CommonsChunkPlugin смотрит все точки входа и выносит то что используется везде. Если 5 точек входа, а код используется в 6-ти, то CommonsChunkPlugin его не вынесет. Но, Мы можем указать, например, minChunks: 2 и CommonsChunkPlugin вынесет те модули, который используется хотя бы в 2-х точках сборки.
  • chunks – можем указать явно из каких модулей стоит выносить:

jQuery or Javascript


3.6 Общий код в commons.js

Зачастую в общий файл (common.js) нужно добавить какие-то свои вызовы: например, подключение и инициализацию библиотек, иниц-ю формы входа на сайт, или что-то еще, то есть код, которой нужен везде. Сделаем это:

Создадим одноименный ( name: «common» в CommonsChunkPlugin ) файл common.js, добавим в него свой код, добавим его как точку входа. В него попадет и ваш код и общий код.

Можно явно указать какие модули следует добавить в общую сборку:

jQuery or Javascript

3.7 Мульти-компиляция

Мульти-компиляция – мы рассматривали ситуацию, когда есть несколько точек входа, а все остальные параметры одинаковые. Но бывают ситуации, когда другие параметры разные, например, много сборок для различных языков, для браузеров. Для того чтобы делать несколько сборок, в которых параметры различаются, используют Мульти-компиляцию – module.exports экспортирует не 1 объект, а массив объектов:

Инструкция try-catch

jQuery or Javascript

jQuery or Javascript

Если в разделе try происходит ошибка, выполнение кода прекращается и возобновляется в блоке catch , в который передается объект с информацией об ошибке.

Объект error зависит от браузера, но в нем как минимум присутствует свойство message (сообщение об ошибке), а также: свойство name (тип ошибки); number – внутренний номер шибки; и т.д.

4.1 Продвинутый require – Динамический require

Запускаем в папке public : static

У нас есть приложение и оно хочет подключить модуль login не сразу, а лишь при необходимости (например, при нажатии на кнопку loginButton ).

Есть два способа, чтобы выделить модуль и подключить его при необходимости:

1 способ – функция webpack: require.ensure

1 аргумент – массив с модулями, webpack сгенерирует из них отдельный фрагмент сборки, и при запуске приложения, если выполнение пройдет в callback require.ensure , модули подгрузятся динамически и в callback мы сможем гарантировано подключить необходимые модули:

jQuery or Javascript

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

Чтобы научить webpack делать запросы (для chunk loading и HMR, “Hot Module Replacement” https://webpack.github.io/docs/hot-module-replacement.html, HMR – особенность, вводить модули во время выполнения) для webpack-dev-server требуется обеспечить полный URL посредством output.publicPath .

2 способ – AMD синтаксис

jQuery or Javascript

AMD синтаксис немного уступает require.ensure .

В нашем случае, если вы кликните по кнопке #loginButton подгрузится скрипт 1.auth.js . В require.ensure в [] можно не прописывать модули, так как webpack анализирует содержимое webpack и все require , которые находятся в callback, автоматически помещаются в [] .

5.1 Внешние библиотеки – CDN и сборка: externals

Рассмотрим подключение на примере библиотеки lodash. В приложении мы можем просто использовать глобальную переменную, которую создает библиотека. Для lodash это подчеркивание _ .

Например, функция _pluck – создает из массива новый массив, содержащий определенной свойство.

Javascript

Для того, чтобы работал следующий require:

Javascript

Несмотря на то что библиотека подключается посредством cdn. Мы должны в webpack.config прописать объект externals , в котором ключами служат названия модулей, в нашем случае это lodash , а значением глобальная переменная это подчеркивание _ .

Javascript

Иначе при сборке будет ошибка.

Следовательно, когда мы let _ = require(‘lodash’); вместо lodash будет глобальная переменная _ .

5.2 Внешние библиотеки – Локально: ProvidePlugin

Рассмотрим более частую ситуацию: когда библиотека не в CDN, а органично включена в проект. В частности, когда она ставится как:

npm install lodash

Далее можно let _ = require(‘lodash’); и библиотека подключится. Однако сборка будет большого размера, почти 0.5Мб.

Поэтому подключим только нужную функцию:

jQuery or Javascript

А теперь укоротим наш код при помощи ProvidePlugin . Многие библиотеки экспортируют глобальные переменные, которые нужны почти везде ( _, $, angular , etc). Если мы не хотим в начале каждого модуля прописывать let compact = require(‘lodash/compact’); то делаем следующее в webpack.config.js:

В plugins указываем объект new webpack.ProvidePlugin(< …. >) , в котором ключами будут переменные, например, compact , а значением будут модули, например, ‘lodash/compact’ .

Если webpack видит переменную ( compact ), которая объявлена, но не используется, тогда ProvidePlugin подключает соответствующий модуль( ‘lodash/compact’ ). Можно подключить и весь lodash:

jQuery or Javascript

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

5.3 Внешние библиотеки – Оптимизация: noParse, include

При подключении сторонних библиотек у сборки могут возникнуть проблемы с производительностью.

При использовании angular и babel время сборки может составить:

Информация о сборке

webpack —profile —display-modules

Покажет все модули сборки и сколько времени webpack потратил на каждый.

Более детальная информация о подключении:

webpack —profile —display-modules —display-reasons

Тормозы могут происходить из-за babel, так как библиотека angular не нуждается в обработке babel.

jQuery or Javascript

Теперь все файлы за исключением (exclude) папки node_modules будут обрабатываться babel.

Директива noParse говорит о том, что библиотеку не надо анализировать (в ней нет require и т.д.) и это убыстрит время сборки. В качестве значения может быть массим из рег. Выражений, строка, рег. Выражение и т.д.

5.4 Внешние библиотеки – Старые скрипты: пути и imports/exports

Иногда возникают ситуации, когда есть старый скрипт и нам нужно внести его в сборку.

Сокращаем запись пути по alias к файлу vendor/old/dist/old.js :

jQuery or Javascript

var old = require(‘old’);

В old.js лежит глобальный функция Work:

jQuery or Javascript

Чтобы работать с такими скриптами у webpack есть: exports-loader и imports-loader

imports-loader – позволяет импортировать переменную внутрь файла.

exports-loader – позволяет экспортировать из файла одну или несколько переменных.

jQuery or Javascript

Импортируем переменную workSettings

5.5 expose и script-loader

Expose-loader позволяет указать переменную и webpack сделает так, чтобы export этого модуля (./file.js) попал в глобальную переменную с таким названием (XMODULE):

s cript-loader – позволяет подключить скрипт в глобальном контексте. Лучше не использовать.

6.1 Стили и файлы

Style-loader добавляет некоторый css в DOM через тег style .

Интеграция в нашу сборку шаблонов, стилей, картинок и других ресурсов. В нашем случае компонентный подход реализован для меню. Все что касается меню находится в папке menu . Задача webpack собрать main.js , подтянуть все что необходимо для меню, скопировать в папку public .

С точки зрения webpack все является модулями. для файла css webpack ищет Loader, при отсутствии оного webpack будет пытаться разобрать css как js-файл и возникнет ошибка.

jQuery or Javascript

Здесь подключаются 3 loader: style-loader, css-loader, autoprefixer-loader.

6.2 Стили и файлы — CSS и file-loader

css-loader играет важную в роль: в css могут быть и import и url, то есть css-loader все import и url заменят на require.

Для статически файлов используется file-loader :

jQuery or Javascript

file-loader копирует статичные файлы в public (смотри конфиг) и возвращает путь к нему. Как и куда копируется определяется параметром name.

Мастер Йода рекомендует:  Исчерпывающий видеокурс структуры данных C#
Добавить комментарий