Webpack и сборщики

Установка Webpack

2.1 Установка

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

Для установки webpack для проекта, там же, в терминале запускаем . Ключ означает, что webpack нам нужен только при разработке, но не нужен в рабочей версии проекта.

После выполнения команды запустится установка, после установки произойдёт вот что:

• В файле в появится ,
• В проекте с темой появится папка , там будут лежать файлы модуля вебпак. Когда потом будете переносить ваш плагин/тему на живой сайт, очень прошу, не переносите эту папку!!

После установки также откройте файл и добавьте в параметр следующее:

"scripts": {
	...
 
	"build": "webpack",
	"start": "webpack --watch"
},

• Когда в консоли будете писать – у вас будет запускаться сборка проекта.
• Если напишете – webpack начнём мониторить изменения файлов и осуществлять сборку после сохранения.

2.2 Конфигурация webpack.config.js

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

const path = require('path');
 
module.exports = {
	mode 'development',
	entry './src/index.js',
	output {
		path path.resolve(__dirname, 'assets'),
		filename 'scripts.js'
	}
};

Напоминаю, что наша цель вебпака в этом уроке – чтобы он собирал нам скрипты в , и файл из файлов sass. Т е есть файлы на входе и на выходе. И в мы как раз это и прописываем.

• (строка 4) – ничего общего с из шага 1.2. Это входной JS файл, в который будут подключаться все остальные, он находится в папке . Тут ничего придумывать не нужно – всё стандартно.
• (строка 5) – то, где создавать файл результата выполнения сборки. У меня это , но стандартно обычно для этого используется директория .

2.3 Проверяем, что на этом этапе webpack работает

Суть проверки будет заключаться в том, что я создам два JS файла с каким-то изишным кодом, подключу их в , запущу вебпак и проверю, что произойдёт на сайте.

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

Затем в файле я их подключаю следующим образом:

import './js/test.js';
import './js/test_1.js';

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

Если проводить параллель с темой или плагином WordPress, то я бы использовал сборку непосредственно для той части кода, в которой я планирую работать с Gutenberg, React. Собирать лёгкий jQuery-код для самого сайта нет смысла. Про настройку JSX я наверное ещё напишу отдельно.

Обработка файлов

Итак, наши JS-модули уже собираются в один бандл, но ведь этого нам недостаточно. Как минимум нужно преобразовать формат ES6, в котором мы пишем наши скрипты, в формат ES5 – менее классный, но зато понятный всем браузерам.

Webpack этого не умеет, увы. Ну и что теперь, расходимся? Конечно, нет, webpack не умеет это сам, но знает тех, кто умеет. Познакомьтесь – лоадеры.

Лоадеры – это скрипты, которые принимают на вход содержимое файла, обрабатывают его и возвращают красивый и удобный результат. Webpack мастерски умеет работать с этими ребятами. От вас требуется только выбрать подходящий лоадер и указать, какой тип файлов он должен обрабатывать.

Начнем с самого важного – транспиляции ES6 в ES5. Знаете, кто умеет это делать? Babel

Нам нужно просто подключить babel-loader в webpack. Ну, не только babel-loader…

• babel core — содержит всю логику транспиляции;
• babel preset env — основной набор плагинов с реализацией возможностей javascript, учитывающих поддержку нужных браузеров;
• babel loader — собственно лоадер, обеспечивающий взаимодействие с webpack.

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

А в файл добавьте указание на то, какие браузеры вы хотите поддерживать (секция ):

Теперь babel знает, что нужно делать, но пока webpack не знает, что ему нужно сотрудничать с babel. Чтобы дать какие-то указания webpack, нам все-таки придется создать конфигурационный файл. Он должен называться и находиться в корне проекта. Это обычный модуль, который экспортирует JavaScript-объект. В этом файле может быть много настроек, но нас сейчас интересуют только лоадеры. Добавьте в этот файл следующий код:

В поле test находится регулярное выражение, определяющее тип файла, в поле — список лоадеров для обработки файлов этого типа. Таким образом, для всех подключаемых файлов с расширением мы будем использовать babel-loader.

Если теперь вы запустите () и посмотрите внимательно на файл , то увидите, что ES6 синтаксис превратился в ES5. Вот так и работают лоадеры.

Обработка стилей

Webpack у нас уже умеет собирать JS-модули в один файл, попутно транспилируя ES6 в ES5. Для более-менее работоспособного приложения осталось добавить обработку CSS стилей и картинок.

Мы привыкли подключать стили CSS отдельными файлами в html-документе с помощью тегов или . С webpack больше не нужно заниматься этим вручную. Вы можете просто подключать нужные файлы прямо в JavaScript-модули. Сборщик сам найдет их, обработает и вставит в документ (в тег ).

Для демонстрации создадим в папке файл и добавим туда какой-нибудь заметный стиль, например:

Импортируем этот файл в src/index.js:

Теперь подберем нужный лоадер. Их нужно сразу два: css-loader и style-loader. Первый превратит css-файл в js-модуль, а второй вставит на страницу тег с содержимым этого файла.

Теперь нужно добавить новые лоадеры в секцию в конфигурационном файле:

Перезапустите сервер – () – вуа-ля – стили применились. Откройте документ в панели разработчика и найдите в секции добавленный тег .

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

Применяться они будут с конца, то есть сначала css-loader, а потом style-loader. Порядок очень важен, так как каждый лоадер работает с определенным состоянием файла.

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

Урок 1. Webpack. Что такое Webpack

10193

152

7

00:11:33

19.04.2017

Курс по Webpack. Основы:
🤍

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

Из данного урока вы узнаете, что такое webpack, где он используется, какие проблемы решает. Вы узнаете, чем отличается webpack от таск раннеров типа grunt и gulp. Узнаете особенность работы webpack с различными сущностями, его области применения и способ интеграции с другими инструментами.

В процессе урока мы разберем какие типы модулей нативно поддерживает webpack, с какими пакетными менеджерами он может работать и что такое hot module replacement. А также мы разберем алгоритм работы webpack на примере сборки javascript файлов.

Урок 1. Webpack. Что такое Webpack — 🤍

Как работает Webpack

В любом веб-проекте есть файлы HTML, CSS, JavaScript, ресурсы, как шрифты, изображения и т.д. Таким образом, рабочий процесс webpack включает в себя настройку файла index.html с соответствующими ссылками на CSS, JavaScript и необходимые ресурсы.

При выполнении задач webpack опирается на конфигурацию. Они прописаны в файле webpack.config.js. В нем указано, как файлы и ресурсы следует трансформировать.

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

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

Webpack и модулиСкопировать ссылку

Существует миф, что Webpack трудно сконфигурировать, чтобы использовать его в большинстве ситуаций. Я использую Webpack недавно, и не могу судить насколько было правдиво это утверждение в прошлом, но оказывается, что сейчас Webpack довольно прост в использовании! Если вы знакомы с ES-модулями, статическим и динамическим импортом, вы в значительной степени готовы к созданию некоторых сложных приложений с хорошей практикой загрузки и без особых навыков конфигурирования.

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

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

Приведенные выше результаты соберутся в bundle.js с некоторой магической ленивой загрузкой, и файл 0.js с кодом для . 0.js называется «чанком» в терминологии, предназначенной для ленивой загрузки другим кодом Webpack, и не обрабатывается непосредственно собственным кодом.

Множественные точки входа и роутингСкопировать ссылку

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

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

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

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

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

Каждый модуль хранится как запись в объекте , причем значение является промисом загрузки, возвращаемым

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

Но если все четыре модуля загружаются лениво, как избежать дублирования кода в точке входа? Безусловно, один из них должен быть ?

На самом деле в этом нет необходимости! Браузер (с поддержкой модулей) и Webpack делают дедупликацию, где они отслеживают, какие модули были загружены, чтобы они не загружались дважды. Таким образом, вам, как разработчику, не нужно беспокоиться о том, чтобы отслеживать что-либо из этого. Это делает точку входа действительно чистой и легкой для понимания:

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

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

Зачем нужен Webpack?

В командной строке запустите open public/index.html. Вы должны увидеть желтую кнопку. При нажатии кнопка должна вывести сообщение в вашу консоль. Если вы нажмете кнопку 10 раз, должно появиться сообщение о том, что вы выиграли! Супер! Все сделано!

Шучу. Посмотрите на файл index.html. Что произойдет, если вы не включите ключевое слово defer в строки 7 и 8? Как насчет того, чтобы переупорядочить файлы JavaScript?

<!-- remove 'defer' from lines 7 and 8 -->
<!-- re-order 'game.js' and 'main.js' -->
  <script src="../src/main.js"></script>
  <script src="../src/game.js"></script>

Вы увидите что-то подобное в своей консоли.

Э-э-э. ** Помните ту вещь, которую я сказал вначале о сценариях, выполняемых по порядку? Атрибут defer говорит вашему браузеру не запускать определенный файл JavaScript до тех пор, пока HTML-файл не будет полностью загружен. Без этой задержки ваш JavaScript начнет выполняется, как только начнет загружаться HTML. И тогда код в вашем файле ‘main.js’ запуститься перед кодом ‘game.js’. То есть ваша программа попытается запустить функцию ‘click()’ до того, как она будет определена.

Вот почему у вас сейчас есть ошибка в вашей консоли.

Режимы сборки

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

От нас требуют какую-то опцию .

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

Теперь посмотрите на – он изменился. Это сборка для разработки, гораздо более читаемая, но и гораздо менее оптимизированная.

Всего есть три варианта опции mode: production, development и none.

Working with JavaScript’s modules in webpack

webpack treats a whole range of files as modules. But, let’s not forget its main purpose: loading ES modules.

Up until 2015 JavaScript didn’t have a standard mechanism for code reuse. There had been a lot of attempts to standardize this aspect, which resulted in a messy fragmentation during the years.

You might have heard about AMD modules, UMD, or Common JS. There was no clear winner. Finally, with ECMAScript 2015, ES modules landed in the language. We now have an «official» module system.

webpack makes a joy working with ES modules and modularized code.

To try out ES modules in webpack let’s create a module in a new file at with the following code:

Now in you can load the module and use the function:

Компиляция CSS- и JS-файлов в Laravel

9393

194

20

00:08:41

22.01.2018

🤍

Фреймворк Laravel позволяет настроить компиляцию CSS и JavaScript файлов с помощью инструмента сборки Webpack. Исходные JS- и SASS-файлы хранятся в директории resources/assets, а публичные скомпилированные версии таблиц стилей и скриптов размещаются в директории public. Запуск компилятора осуществляется в терминале с помощью команды npm run dev.

Помимо единоразовой компиляции файлов в Laravel Mix есть специальная команда npm run watch, которая позволяет установить наблюдение за изменениями в исходных JS- и SASS-файлах из директорий resources/assets и, в случае их изменения, автоматически компилировать и обновлять публичные файлы.

В итоге, благодаря системе Laravel Mix, разработчики получают возможность использования миксинов и переменных для работы с таблицами стилей, а также синтаксис ES2015, компиляцию VUE-файлов и сжатие конечных файлов JS-приложений.

Webpack — Полная настройка шаблонизатора pug. Использование в верстке и не только!

23149

632

123

00:27:37

19.06.2019

В этом видео мы продолжим настраивать шаблон Webpack. Подключим pug, он же jade. Поговорим зачем нужны шаблонизаторы, как они облегчают жизнь. А также конечный обзор на текущую сборку!

Новый курс по вью 3 — 🤍
Введи промокод «Webpack» и получи жирную скидку

► Группа вк, где я публикую различные новости:
🤍

Благодаря вашей поддержке, выходят новые видео:
🤍

Исходники:

Статья из видео + все исходники: 🤍
Начальная сборка + подключенный паг: 🤍
Начальная сборка БЕЗ пага: 🤍

Вопросы по видео, задавайте в комментах, а поболтать можем в группах:
► Добавляйте в друзья — 🤍
► Группа вк — 🤍
Телеграмм — 🤍

Ссылки из видео:
🤍 — хтмл в паг и обратно онлайн
🤍 — документация по паг (очень много интересного)

Webpack — Полный курс за 3 часа [2020]

454103

15923

1562

02:51:49

16.01.2020

Исходный код тут: 🤍
Подпишись на меня в Instagram: 🤍

Подписывайся на соц сети:
Telegram: 🤍
Instagram: 🤍
VK: 🤍
Группа VK: 🤍

Мои Курсы:
🤍

Тайм-коды:
00:00 – Вступление
03:01 – Написание базового приложения
14:56 – Инициализация приложения
16:33 – Установка Webpack
18:30 – Базовая настройка Webpack
38:12 – Паттерны
39:46 – Плагины
40:31 – Работа с HTML
45:56 – Очистка папки проекта
47:50 – Сборка проекта
50:17 – Контекст
51:50 – CSS-лоадеры
58:56 – Работа с JSON
1:02:50 – Работа с файлами
1:09:02 – Работа со шрифтами
1:13:21 – Подключение CSS-библиотек
1:14:51 – Защита от публикации пакета
1:15:32 – Работа с XML-файлами
1:17:44 – Работа с CSV-файлами
1:20:06 – Дополнительные настройки
1:24:54 – Подключение JS-библиотек
1:28:56 – Оптимизация
1:33:40 – Webpack-dev-server
1:39:14 –  Копирования статических файлов
1:42:32 – Сжатие CSS, HTML, JS
1:59:37 – Компиляция Less
2:06:08 – Компиляция Sass
2:03:57 – Оптимизация
2:10:21 – Babel
2:22:35 – Добавление плагинов для Babel
2:24:28 – Компиляция TypeScript
2:27:20 – Компиляция React JSX
2:33:38 – Devtool
2:36:14 – ESLint
2:43:00 – Динамические импорты
2:44:52 – Анализ финальной сборки

Webpack. Полный курс 2020
#webpack #js #javascript

Базовые понятия 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.base.conf.js
  // Константа PATHS есть в спойлере в этой статье
  entry: {
    back: PATHS.src_back,
    front: PATHS.src_front,
  },
  output: {
    filename: `js/.js?v=`,
    path: PATHS.dist,
    publicPath: '/'
  },

Вычленяем из код для чанков и

• В записываем то, что нужно везде.
• В попадают файлы библиотеки Buefy, которая нужная только в .

Параметр — Это регулярное выражение, которому должен соответствовать буть к файлу

optimization: {
  splitChunks: {
    cacheGroups: {
      common_vendors: {
        test: /node_modules(vue|vue-router|vuex|axios|@riophaevue-treeselect)/,
        name: 'common_vendors', // имя чанка
        chunks: 'initial',
        enforce: true,
      },
      buefy: {
        test: /node_modules(buefy)/,
        name: 'buefy',
        chunks: 'initial',
        enforce: true,
      },
    }
  }
},

Добавить обработку двух шаблонов

Ключевой момент — настройка . Тут мы определяем, какие чанки подгружаем в шаблон.

и мы определили на предыдущем этапе, а чанки и формируются какбы автоматически по имени точки входа, указанной в параметре

  // взято из webpack.dev.conf.js и webpack.build.conf.js
  // baseWebpackConfig (PATHS) есть в спойлере в этой статье
  new HtmlWebpackPlugin({
    template: `${baseWebpackConfig.externals.paths.src_back}/index.html`,
    filename: './index.html',
    title: "mode_development", // Нужно для костыльного условия в шаблоне
    inject: false,
    chunks: baseWebpackConfig.externals.paths.back_chunks, // 
  }),
  
  // Обработка шаблона точки входа "front"
  new HtmlWebpackPlugin({
    template: `${baseWebpackConfig.externals.paths.src_front}/index.html`,
    filename: './pp.html',
    title: "mode_development",
    inject: false,
    chunks: baseWebpackConfig.externals.paths.front_chunks, // 
  }),

Инъекция файлов в HTML (pug/шмаг) шаблон

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

В принципе, это можно сделать и вручную, но давайте не будем так делать:)

  <!-- Так не делаем -->
  <script src="/js/common_vendors.js"></script>
  <script src="/js/buefy.js"></script>
  <script src="/js/back.js"></script>

В шаблоне мы можем вызвать конструкцию для подключения JS и CSS:

  <!-- Подгружаем CSS Файлы -->
  <% for (var css in htmlWebpackPlugin.files.css) { %>
  <link rel="stylesheet" href="<%= htmlWebpackPlugin.files.css %>">
  <% } %>

  <div id="app">
    ...
  </div>
  
  <!-- Подгружаем JS Файлы -->
  <% for (var js in htmlWebpackPlugin.files.js) { %>
  <script src="<%= htmlWebpackPlugin.files.js %>"></script>
  <% } %>

Добавление CSS

В HTML выше видно, что мы загружаем . Вебпак умеет работать не только с JavaScript, но и с другой статикой, в том числе CSS. Удалите строку с из . Мы будем подключать стили в таким образом:

вебпак перезагрузит изменения, и мы увидим сообщение об ошибке в консоли:

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

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

Синтаксис означает, что сначала нужно применить трансформацию для конвертации текста из в CSS, а потом применить стиль к странице с помощью трансформации .

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

SCSS

3.1 Как это будет

Сначала давайте немного наглядности, чтобы вам было понятно. Точно так же, как и с JS файлами, давайте проделаем следующее:

1. Создаем директорию и добавим в неё файл ,2. Одна из фишек препроцессоров – переменные, поэтому содержимое файла закинем такое:

$color #fefefe;
body{
	color $color;
}

3. Подключим наш файл там же – в – ,4. Файл в папке с темой у нас уже создан

Конечно сборку сейчас запускать не надо, у вас ничего не будет работать, я ведь хотел показать вам лишь общую картину.

Устанавливаем это:  (если вы не догадались, это тот же

Я установил

3.2 Настройка webpack.config.js

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

const path = require('path');
const miniCss = require('mini-css-extract-plugin');
 
module.exports = {
	mode 'development',
	entry './src/index.js',
	output {
		path path.resolve(__dirname, 'assets'),
		filename 'scripts.js'
	},
	module {
		rules {
			test:/.(s*)css$/,
			use 
				miniCss.loader,
				'css-loader?url=false',
				'sass-loader',
			
		}
	},
	plugins 
		new miniCss({
			filename '../style.css',
		}),
	
};

• На строчке 2 мы подключили наш установленный плагин
• Также у нас появились параметры module и plugins
• На строчке 23 указано , что значит – нам не нужно создавать файл в assets, а использовать файл стилей темы.
• На строке 16 я ставлю ?url=false, чтобы webpack не напрягал с путями изображений, так как я их планирую сразу расположить, где мне нужно. А то у вас были бы ошибки типа «Module not found: Error: Can’t resolve ‘./assets/logo.svg»

3.3 Минификация CSS

1. Подключаем его в в начале файла
2. Добавляем это:

optimization {
	minimizer 
		new minify({})
	,
},

В итоге файл будет выглядеть так:

const path = require('path');
const miniCss = require('mini-css-extract-plugin');
const minify = require('optimize-css-assets-webpack-plugin');
 
module.exports = {
	mode 'development',
	entry './src/index.js',
	output {
		path path.resolve(__dirname, 'assets'),
		filename 'scripts.js'
	},
	module {
		rules {
			test:/.(s*)css$/,
			use 
				miniCss.loader,
				'css-loader',
				'sass-loader',
			
		}
	},
	optimization {
		minimizer 
			new minify({})
		,
	},
	plugins 
		new miniCss({
			filename '../style.css',
		}),
	
};

Ничего не произошло при сборке? А вы поменяли в параметр с на ?

Working with modern JavaScript

webpack doesn’t know on its own how to transform JavaScript code. This task is outsourced to a third-party loader, specifically babel-loader, with babel.

babel is a JavaScript compiler and «transpiler». Given modern JavaScript syntax as input, babel is able to transform it to compatible code that can run in (almost) any browser.

Before moving forward we need to install a bunch of packages:

• babel core, the actual engine
• babel preset env for compiling modern Javascript down to ES5
• babel loader for webpack

Let’s pull in the dependencies:

Finally, configure webpack to use the loader for transforming JavaScript files (I left the SASS too loader for a bit more context):

To test the transformation, write some modern syntax in :

Now run to see the transformed code in . Open up and search for «fancyFunc»:

Without babel, the code wouldn’t be transpiled:

Note: webpack works totally fine even without babel. The transpiling process is only necessary for shipping ES5.

Бандлеры модулей идут на помощь

Веб-браузеры не понимают эти хорошо описанные модули. Нужно или добавить весь JavaScript-код в один файл и импортировать его, или нужно добавить все файлы вручную на страницу с помощью тега . Используем бандлер модулей (module bundler) для решения этой проблемы. Бандлер модулей комбинируют разные модули и их зависимости в один файл в правильном порядке. Он может парсить код, написанный с использованием разных модульных систем, и комбинировать в один формат, понятный браузеру. Два популярных бандлера модулей это:

1. browserify: пакует npm-модули, чтобы потом использовать их в браузере. В случае с browserify приходится дополнительно подключать Grunt или Gulp для линтинга, запуска тестов и пр. Это значит, что нужно тратить время на работу с несколькими инструментами и интеграцией.
2. webpack: система сборки, которая предоставляет не только бандлинг (компоновку) модулей, но и может выполнять задачи, которыми занимаются Gulp/Grunt. К тому же, вебпак не ограничивается JavsScript-файлами, он может работать с другой статикой вроде CSS, картинок, html-компонентов и др. Вебпак также поддерживает очень полезную фичу — (разбиение кода). Большое приложение можно разбить на куски, которые загружаются по мере необходимости.

Node.js

1.2 Инициализируем проект

Для этого открываем терминал в папке с проектом (это лучше сделать через текстовый редактор, который вы используете, я например установил пакет для Atom для работы с терминалом и всё) и запускаем там , после чего будут появляться различные вопросы, например как назвать ваш проект, какая у него версия и т.д

• package name – название проекта (по умолчнию – название папки проекта),
• version – версия (по умолчанию 1.0.0),
• description – описание проекта,
• entry point – типо основной файл вашего npm-проекта, который и будет запускаться при его сборке, это нам пока не понадобится, можно оставить значение по умолчанию (по умолчанию index.js),
• test command – команда, которая будет происходить при запуске , оставляем значение по умолчанию,
• git repository и keywords не понадобится,
• author – легко, имя автора,
• license – лицензия, (по умолчанию ISC),

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

Стас Курилов — Глубокое погружение в webpack

14435

524

13

00:59:01

29.03.2019

Ближайшая конференция: HolyJS 2022 Spring.
Подробности и билеты: 🤍
— —
. . Когда мы разбирали черновик этого доклада, мы столкнулись с двумя интересными моментами:

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

Стас расскажет о внутреннем устройстве webpack на примере написания лоадера для работы с SVG-спрайтами. Он рассмотрит основные этапы его работы, покажет, когда нужен лоадер, когда — плагин, как можно наладить связь между ними и зачем она нужна. Также он объяснит, как работают популярные плагины — extract-text-webpack-plugin, html-webpack-plugin, react-styleguidist.

Обзор проблемыСкопировать ссылку

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

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

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

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

В зависимости от маршрута, будет загружен только один из файлов пакета. Этот файл будет лениво загружать другие модули, по мере необходимости. И если пользователь открыл продукт, то загрузится только bundle-product.js, необходимый для текущей страницы , а затем лениво подгрузятся home.js, category.js и checkout.js, если это необходимо.

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

Без конфигурации

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

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

Примечание: важно соблюдать предложенную мной структуру файлов (). Почему, станет понятно очень скоро

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

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

Теперь установим сам webpack и инструмент webpack-cli для работы с ним из терминала.

А теперь просто запустим webpack!

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

Что произошло?

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

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

Давайте теперь вынесем функцию hello в отдельный файл, чтобы webpack мог показать, на что он действительно способен.

Запустите webpack (), и вы получите тот же самый результат!

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

Заключение

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

Официальная документация webpack.

Пожалуйста, оставьте ваши комментарии по текущей теме материала. За комментарии, лайки, отклики, дизлайки, подписки низкий вам поклон!

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

Ангелина Писанюкавтор-переводчик статьи «A Beginner’s Guide to Webpack»

Очистка вывода

По мере расширения проекта папка dist становится дольно объемной. При каждой сборке webpack будет генерировать бандлы, и помещать их в папку dist. Но при этом сборщик не отслеживает, какие файлы используются в проекте по факту. Поэтому рекомендуется очищать папку dist перед каждой сборкой, чтобы генерировались только используемые файлы. Для этого нужно установить и настроить clean-webpack-plugin:

npm install --save-dev clean-webpack-plugin

В webpack.config.js:

const CleanWebpackPlugin = require('clean-webpack-plugin');

...

plugins: ,

Затем запустите webpack (npm run build) и проверьте папку dist. Теперь вы увидите в ней только файлы, сгенерированные из сборки. В нашем случае файл, который следует удалить, это main.js.