Webpack за 15 минут


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

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

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

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

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

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

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

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

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

Настройка Webpack для быстрой front-end разработки

На вебинаре мы рассмотрим применение компоновщика Webpack для сборки всех необходимых файлов front-end проекта перед публикацией.

Вы увидите, как установить и настроить Webpack с нуля, а также создать свой «шаблон для старта».

Вы узнаете:

  • Что такое Webpack и как его установить.
  • Как грамотно настроить среду разработки.
  • Как установить дополнительные модули (jQuery, Bootstrap).
  • С помощью каких инструментов оптимизировать код.
  • Как автоматизировать сжатие изображений.
  • Как подключить препроцессоров CSS.
  • Как создать репозиторий для быстрого старта.

В первую очередь материал рассчитан на новичков, которые хотят попробовать Webpack и научиться собирать front-end проекты.

Введение в 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)

Webpack — это статический модульный сборщик для приложений на JavaScript.

Чем полезен вебпак

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

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

Как и другие инструменты разработчика, вебпак имеет свои плюсы и минусы.

Начнем с плюсов: он отлично подходит для работы с одностраничными приложениями. Также вебпак может осуществлять продвинутое разделение кода. Из-за этих и других плюсов сейчас он является одним из наиболее популярных инструментов JS-разработки.

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

Установка

Вебпак можно установить при помощи менеджера пакетов, например npm .

Базовые понятия


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

  1. Entry — вход
  2. Output — вывод
  3. Loaders — загрузчики
  4. Plugins — плагины

Entry

Под Entry (вход) подразумевается точка входа (entry point), которую вебпак будет использовать для построения внутреннего графа зависимостей. После ввода точки входа вебпак сможет понять, какие модули и библиотеки напрямую и не напрямую связываются.

В результате каждая зависимость превращается в файлы, которые называются бандлами (bundles — можно перевести как пакеты или узлы).

Пример простейшей конфигурации entry:

webpack.config.js

Output

Output (вывод) указывает, где вебпак должен размещать сборку созданных бандлов, и как он будет называть эти файлы (по умолчанию это ./dist). Настроить эту часть процесса можно в поле output в конфигурации:

webpack.config.js

В этом примере output.filename отвечает за имя файла, а output.path — за место, директорию, где будет находиться сборка.

Loaders

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

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

Использование загрузчиков имеет две цели:

  1. Свойство test определяет, какой файл/ файлы должны быть трансформированы.
  2. Свойство use указывает, какой загрузчик должен использоваться для выполнения трансформации.

Здесь определяются правила (rules) для определенного модуля и используются свойства test и use. Компилятор вебпака поймет, что когда он дойдет до файла «.txt» в require()/import, перед добавлением в бандл ему нужно будет использовать загрузчик raw-loader.

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

Plugins

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

Для того, чтобы использовать плагин, необходимо использовать require() и добавить его в массив плагинов. Большинство плагинов можно кастомизировать через настройки. Так как один плагин может использоваться несколько раз для разных целей, необходимо создать несколько отдельных экземпляров, использовав оператор new.

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

Заключение

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

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

Обновлено 10.05.2020

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

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

Обновлено 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 — «продакшен»

Learn Webpack in 15 Minutes

Build tools have become an integral part of web development, mainly due to the ever-increasing complexity of JavaScript apps. Bundlers allow us to package, compile, and organize the many assets and libraries needed for a modern web project.

In this tutorial we will take a look at webpack, a powerful open-source bundler and preprocessor that can handle a huge variety of different tasks. We’ll show you how to write modules, bundle code, and use some of the loader plugins. The tutorial is designed for total beginners to webpack, but having some JavaScript knowledge is advised.

Why webpack?

Much like any other aspect of web development, there isn’t a standard for which build tool to use. Right now, developers have to choose between webpack, Gulp, Browserify, NPM scripts, Grunt, and like 10 others. There are many in-depth comparisons out there, but all of these tools are very similar, so most of the time it comes down to personal preference and what project you are working on.

Here are some pros and cons to help you decide whether webpack is the tool for you:

Pros:

  • Great for working with singe-page apps
  • Accepts both require() and import module syntaxes
  • Allows for very advanced code splitting
  • Hot Reload for quicker development with React, Vue.js and similar frameworks
  • Мost popular build tool according to the 2020 JavaScript survey

Cons:

  • Not suitable for beginners in web development
  • Working with CSS files, images, and other non-JS resources is confusing at first
  • Documentation could be better
  • Changes a lot, even most 2020 tutorials are already outdated

1. Installation

The easiest way to install webpack is by using a package manager. We will go with npm but feel free to use Yarn or another hip alternative. In both cases you need to have Node.js on your machine and a package.json ready to go.

It is preferred to install it locally (without the -g tag). This will make sure everyone working on your project has the same version of webpack.

Once we have it installed, it’s best to run webpack via a Node.js script. Add these lines to your package.json:

Now by calling npm run build from the terminal we can make webpack bundle our files (the -p option stands for production and minifies the bundled code). Running npm run watch will start a process that automatically bundles our files when any of them change.

The last part of the setup is to tell webpack which files to bundle up. The recommended way to do this is by creating a config file.

2. Webpack Config File

Here we will look at the config file in its most basic form but don’t let that fool you — the webpack config file is quite powerful, varies a lot from project to project, and can become super complex in some cases.

In the root directory of your project add a file called webpack.config.js.

webpack.config.js

The entry option tells webpack which is our main JavaScript file. There are many different strategies for configuring entry points but in most cases a single entry is enough.

In output we specify the name and path of our bundle. After running webpack we will have all our JavaScript in a file called bundle.js. This is the only script file that we will link in our HTML:

This setup should be enough to get us started. Later we will add some more stuff to it, but first let’s see how modules work.


3. Webpack Modules

Webpack provides multiple ways to work with modules, and most of the time you are free to go with whichever one you like. For this tutorial we will use the ES6 import syntax.

We want to add a module that greets our users. We create a file called greeter.js and make it export a simple function:

greeter.js

To use this module, we have to import it and call it in our entry point, which if you look back at the config file is index.js.

index.js

Now when we run the bundler with npm run build , and open our HTML in the browser, we see this:

Our entry point and our greeter module were compiled into one file called bundle.js and it was executed by the browser. Here is a simple flow chart of what’s happening so far:

4. Requiring Libraries

We want our app to specify which day of the week it is when it greets users. To do so we will use moment.js by directly importing it into our greeter module.

First we need to install the library via npm:

Then in our greeting module, we simply import the library exactly the same way we imported local modules in the previous point:

greeter.js

After we bundle up again to apply the changes, in the browser console we will have the following messages:

Our flow diagram now looks like this:

Note: There are other, more advanced techniques for including libraries but they are outside the scope of this article. You can read more about them here.

5. Loaders

Loaders are webpack’s way to execute tasks during bundling and pre- or post-process the files in some manner. For example, they can compile TypeScript, load Vue.js components, render templates, and much more. Most loaders are written by the community, for a list of popular loaders go here.

Let’s say we want to add a linter to our project that checks our JS code for errors. We can do so by including the JSHint loader, which will catch all kinds of bad practices and code smells.

Мастер Йода рекомендует:  Как работает процессор

First we need to install both JSHint and the webpack JSHint loader:

Afterwords, we are going to add a few lines to our webpack config file. This will initialize the loader, tell it what type of files to check, and which files to ignore.

webpack.config.js

Now when webpack is started, it will show us a list of warnings in the terminal (which we will ignore):

Since moment.js is located in the node_modules folder, it won’t be linted by the JSHint loader:

Further Reading

This concludes our introduction to webpack! Since this is a lesson for beginners, we tried to cover only the most useful and must-know concepts of webpack. We hope the tutorial has been helpful, not too confusing, and within the 15 minute limit from the title.

In the near future, we are planning to add a second part to this tutorial, explaining how to work with CSS modules and other more-advanced features. In the meantime, if you want to learn more about webpack (and there is a lot more) we recommend checking out these awesome resources:

    webpack.js.org — The official website for the project, lots of gu >

Bootstrap Studio

The revolutionary web design tool for creating responsive websites and apps.

Installation

This guide goes through the various methods used to install webpack.

Prerequisites

Before we begin, make sure you have a fresh version of Node.js installed. The current Long Term Support (LTS) release is an ideal starting point. You may run into a variety of issues with the older versions as they may be missing functionality webpack and/or its related packages require.

Local Installation

The latest webpack release is:

To install the latest release or a specific version, run one of the following commands:


If you’re using webpack v4 or later, you’ll also need to install the CLI.

Installing locally is what we recommend for most projects. This makes it easier to upgrade projects individually when breaking changes are introduced. Typically webpack is run via one or more npm scripts which will look for a webpack installation in your local node_modules directory:

To run the local installation of webpack you can access its binary version as node_modules/.bin/webpack . Alternatively, if you are using npm v5.2.0 or greater, you can run ‘npx webpack’ to do it.

Global Installation

The following NPM installation will make webpack available globally:

Note that this is not a recommended practice. Installing globally locks you down to a specific version of webpack and could fail in projects that use a different version.

Bleeding Edge

If you are enthusiastic about using the latest that webpack has to offer, you can install beta versions or even directly from the webpack repository using the following commands:

Take caution when installing these bleeding edge releases! They may still contain bugs and therefore should not be used in production.

Видео курс по 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

#1 — Введение в Webpack 2

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

Всем привет! Меня зовут Ковальчук Дмитрий. Вы смотрите Лофтскул. И прямо сейчас я познакомлю вас с Webpack. Webpack — это инструмент, предназначенный для сборки JavaScript-модулей в вашем приложении. Его ещё называют “Сборщик модулей” (“Module bundler” или просто “Бандлер”).

1 слайд. Webpack, gulp, grunt — в чем разница?

Webpack часто сравнивают с такими инструментами, как Gulp и Grunt, т.е. с менеджерами задач, или, как их ещё называют, “task runners”. Они предназначены для совершенно других целей. Давайте разберемся, чем менеджеры задач отличаются от бандлеров.

2 слайд. Менеджеры задач

Наиболее популярный пример — Gulp. Он предназначен для широкого спектра задач: “linting” (“линтинг”, т.е. проверка кода по заданным критериям), “building” (так называемая “сборка” проекта для продакшена, когда исходные файлы, например, SASS превращаются в CSS, минифицируются, соединяются в один или несколько и пр.), “developing” (под этим термином понимают инструменты, предназначенные исключительно для разработчика, например, локальный сервер с живой перезагрузкой “livereload” и пр.). С помощью Gulp (и огромного числа плагинов) можно сделать практически всё, что может прийти в голову разработчику! В том числе упаковать ваш проект и отправить его по FTP на хостинг.

3 слайд. Бандлеры

К наиболее популярным бандлерам относятся Browserify, Brunch, Rollup и, конечно же, Webpack. Предназначены они для гораздо более специфических целей, таких как сборка и оптимизация JavaScript-модулей. Зачем это нужно? Когда в вашем проекте появится 3, 5, а может и 15 javascript-файлов, вы, наверняка, столкнетесь с самыми разными проблемами, начиная с “управления версиями” (например, один плагин требует jQuery-версии 1.6, а другой jQuery-версии 2.1) и заканчивая “управлением зависимостями” (есть модули самостоятельные, а есть зависящие от пары-тройки других).

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

4 слайд. Для Webpack — всё что угодно может быть модулем

Модулями могут быть не только JS-файлы, но также и CSS-, HTML-файлы. Более того, отдельно взятая картинка тоже становится модулем!

5 слайд. О Webpack «на пальцах»

Webpack — это бандлер. “Bundle” переводится как “пачка”. Если постараться максимально упростить, то можно сказать, что webpack собирает большое количество ваших разрозненных javascript- (и других) файлов и аккуратно склеивает их в один или несколько файлов.

6 слайд. Webpack может заменить Gulp?

Благодаря энтузиазму сообщества разработчиков появилось огромное количество самых разных плагинов, которые позволяют Webpack работать с препроцессорами (такими, как SASS), шаблонизаторами (такими, как PUG), а также картинками, шрифтами и так далее. На сегодняшний день можно смело заявить, что Webpack может заменить Gulp, по крайней мере, для самых распространенных повседневных задач веб-разработчика.

7 слайд. Чем Webpack лучше, чем Gulp?

Gulp не предназначен для сборки javascript модулей, он этого не умеет. Webpack умеет и справляется с этим отлично.

Мастер Йода рекомендует:  MySQL для пользователя

Четыре базовые концепции Webpack

Рассмотрим базовые концепции Webpack. Их всего четыре.

Entry

Webpack создает граф зависимостей вашего приложения. Стартовая точка в этом графе называется — “точкой входа” (“entry point”). Точка входа указывает вебпаку, где ваше приложение берет начало и далее следует по графу зависимостей, чтобы понять, что включить в бандл. Проще говоря, точка входа — это первый файл, с которого начинается ваше приложение.

Webpack за 15 минут

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


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

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

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

Что такое Webpack?

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

Весь трюк заключается вот в чем. 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 и изображений, а также, как подготовить приложение для размещения его на боевом сервере.

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

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