Как запустить webpack dev server

Webpack: руководство для начинающих

Представляю вашему вниманию перевод статьи «Webpack: A gentle introduction» автора Tyler McGinnis.

Перед изучением новой технологии задайте себе два вопроса:

1. Зачем нужен этот инструмент?
2. Какие задачи он выполняет?

Зачем нужен вебпак?

Вебпак — это сборщик модулей. Он анализирует модули приложения, создает граф зависимостей, затем собирает модули в правильном порядке в один или более бандл (bundle), на который может ссылаться файл «index.html».

App.js -> | Dashboard.js -> | Bundler | -> bundle.js About.js -> | 

Какие проблемы решает вебпак?

Обычно, при создании приложения на JavaScript, код разделяется на несколько частей (модулей). Затем в файле «index.html» необходимо указать ссылку на каждый скрипт.

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

Как мы скоро узнаем, сбор модулей является лишь одним из аспектов работы вебпака. При необходимости можно заставить вебпак осуществить некоторые преобразования модулей перед их добавлением в бандл. Например, преобразование SASS/LESS в обычный CSS, или современного JavaScript в ES5 для старых браузеров.

Установка вебпака

После инициализации проекта с помощью npm, для работы вебпака нужно установить два пакета — webpack и webpack-cli .

npm i webpack webpack-cli -D 

webpack.config.js

После установки указанных пакетов, вебпак нужно настроить. Для этого создается файл webpack.config.js , который экспортирует объект. Этот объект содержит настройки вебпака.

module.exports = <> 

Основной задачей вебпака является анализ модулей, их опциональное преобразование и интеллектуальное объединение в один или более бандл, поэтому вебпаку нужно знать три вещи:

1. Точка входа приложения
2. Преобразования, которые необходимо выполнить
3. Место, в которое следует поместить сформированный бандл

Точка входа

Сколько бы модулей не содержало приложение, всегда имеется единственная точка входа. Этот модуль включает в себя остальные. Обычно, таким файлом является index.js. Это может выглядеть так:

index.js imports about.js imports dashboard.js imports graph.js imports auth.js imports api.js 

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

module.exports = < entry: './app/index.js' >

Преобразования с помощью лоадеров (loaders)

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

По умолчанию при создании графика зависимостей на основе операторов import / require() вебпак способен обрабатывать только JavaScript и JSON-файлы.

import auth from './api/auth' // import config from './utils/config.json' // import './styles.css' // ️ import logo from './assets/logo.svg' // ️ 

Едва ли в своем приложении вы решитесь ограничиться JS и JSON-файлами, скорее всего, вам также потребуются стили, SVG, изображения и т.д. Вот где нужны лоадеры. Основной задачей лоадеров, как следует из их названия, является предоставление вебпаку возможности работать не только с JS и JSON-файлами.

Первым делом нужно установить лоадер. Поскольку мы хотим загружать SVG, с помощью npm устанавливаем svg-loader.

npm i svg-inline-loader -D 

Далее добавляем его в настройки вебпака. Все лоадеры включаются в массив объектов module.rules :

module.exports = < entry: './app/index.js', module: < rules: [] >> 

Информация о лоадере состоит из двух частей. Первая — тип обрабатываемых файлов ( .svg в нашем случае). Вторая — лоадер, используемый для обработки данного типа файлов ( svg-inline-loader в нашем случае).

module.exports = < entry: './app/index.js', module: < rules: [ < test: /\.svg$/, use: 'svg-inline-loader' >] > > 

Теперь мы можем импортировать SVG-файлы. Но что насчет наших CSS-файлов? Для стилей используется css-loader .

npm i css-loader -D 

module.exports = < entry: './app/index.js', module: < rules: [ < test: /\.svg$/, use: 'svg-inline-loader' >, < test: /\.css$/, use: 'css-loader' >] > > 

Теперь мы можем импортировать как SVG, так и CSS-файлы. Однако для того, чтобы наши стили работали корректно, нужно добавить еще один лоадер. Благодаря css-loader мы можем импортировать CSS-файлы. Но это не означает, что они будут включены в DOM. Мы хотим не только импортировать такие файлы, но и поместить их в тег , чтобы они применялись к элементам DOM. Для этого нужен style-loader .

npm i style-loader -D 

module.exports = < entry: './app/index.js', module: < rules: [ < test: /\.svg$/, use: 'svg-inline-loader' >, < test: /\.css$/, use: [ 'style-loader', 'css-loader' ] >] > > 

Обратите внимание, что поскольку для обработки CSS-файлов используется два лоадера, значением свойства use является массив. Также обратите внимание на порядок следования лоадеров, сначала style-loader , затем css-loader . Это важно. Вебпак будет применять их в обратном порядке. Сначала он использует css-loader для импорта ‘./styles.css’ , затем style-loader для внедрения стилей в DOM.

Лоадеры могут использоваться не только для импорта файлов, но и для их преобразования. Самым популярным является преобразование JavaScript следующего поколения в современный JavaScript с помощью Babel. Для этого используется babel-loader .

npm i babel-loader -D 

module.exports = < entry: './app/index.js', module: < rules: [ < test: /\.svg$/, use: 'svg-inline-loader' >, < test: /\.css$/, use: [ 'style-loader', 'css-loader' ] >, < test: /\.(js)$/, use: 'babel-loader' >] > > 

Существуют лоадеры почти для любого типа файлов.

Точка выхода

Теперь вебпак знает о точке входа и лоадерах. Следующим шагом является указание директории для бандла. Для этого нужно добавить свойство output в настройки вебпака.

const path = require('path') module.exports = < entry: './app/index.js', module: < rules: [ < test: /\.svg$/, use: 'svg-inline-loader' >, < test: /\.css$/, use: [ 'style-loader', 'css-loader' ] >, < test: /\.(js)$/, use: 'babel-loader' >] >, output: < path: path.resolve(__dirname, 'dist'), filename: 'index_bundle.js' >> 

Весь процесс выглядит примерно так:

1. Вебпак получает точку входа, находящуюся в ./app/index.js
2. Он анализирует операторы import / require и создает граф зависимостей
3. Вебпак начинает собирать бандл, преобразовывая код с помощью соответствующих лоадеров
4. Он собирает бандл и помещает его в dist/index_bundle.js

Плагины (plugins)

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

Давайте рассмотрим пример.

HtmlWebpackPlugin

Основной задачей вебпака является генерация бандла, на который можно сослаться в index.html .

HtmlWebpackPlugin создает index.html в директории с бандлом и автоматически добавляет в него ссылку на бандл.

Мы назвали бандл index_bundle.js и поместили его в dist . HtmlWebpackPlugin создаст новый файл index.html в директории dist и добавит в него ссылку на бандл — . Здорово, правда? Поскольку index.html генерируется HtmlWebpackPlugin , даже если мы изменим точку выхода или название бандла, HtmlWebpackPlugin получит эту информацию и изменить содержимое index.html .

Как нам использовать этот плагин? Как обычно, сначала его нужно установить.

npm i html-webpack-plugin -D 

Далее добавляем в настройки вебпака свойство plugins .

const path = require('path') module.exports = < entry: './app/index.js', module: < rules: [ < test: /\.svg$/, use: 'svg-inline-loader' >, < test: /\.css$/, use: [ 'style-loader', 'css-loader' ] >, < test: /\.(js)$/, use: 'babel-loader' >] >, output: < path: path.resolve(__dirname, 'dist'), filename: 'index_bundle.js' >, plugins: [] > 

Создаем экземпляр HtmlWebpackPlugin в массиве plugins .

 const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = < entry: './app/index.js', module: < rules: [ < test: /\.svg$/, use: 'svg-inline-loader' >, < test: /\.css$/, use: [ 'style-loader', 'css-loader' ] >, < test: /\.(js)$/, use: 'babel-loader' >] >, output: < path: path.resolve(__dirname, 'dist'), filename: 'index_bundle.js' >, plugins: [ new HtmlWebpackPlugin() ] > 

EnvironmentPlugin

Если вы используете React, то захотите установить process.env.NODE_ENV в значение production перед разворачиванием (деплоем) приложения. Это позволит React осуществить сборку в режиме продакшна, удалив инструменты разработки, такие как предупреждения. Вебпак позволяет это сделать посредством плагина EnvironmentPlugin . Он является частью вебпака, так что его не нужно устанавливать.

const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const webpack = require('webpack') module.exports = < entry: './app/index.js', module: < rules: [ < test: /\.svg$/, use: 'svg-inline-loader' >, < test: /\.css$/, use: [ 'style-loader', 'css-loader' ] >, < test: /\.(js)$/, use: 'babel-loader' >] >, output: < path: path.resolve(__dirname, 'dist'), filename: 'index_bundle.js' >, plugins: [ new HtmlWebpackPlugin(), new webpack.EnvironmentPlugin(< 'NODE_ENV': 'production' >) ] > 

Теперь в любом месте нашего приложения мы можем установить режим продакшна с помощью process.env.NODE_ENV .

HtmlWebpackPlugin и EnvironmentPlugin — это лишь небольшая часть системы плагинов вебпака.

Режим (mode)

В процессе подготовки приложения к продакшну, необходимо выполнить несколько действий. Мы только что рассмотрели одно из них — установку process.env.NODE_ENV в значение production . Другое действие заключается в минификации кода и удалении комментариев для уменьшения размера бандла.

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

const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = < entry: './app/index.js', module: < rules: [ < test: /\.svg$/, use: 'svg-inline-loader' >, < test: /\.css$/, use: [ 'style-loader', 'css-loader' ] >, < test: /\.(js)$/, use: 'babel-loader' >] >, output: < path: path.resolve(__dirname, 'dist'), filename: 'index_bundle.js' >, plugins: [ new HtmlWebpackPlugin() ], mode: 'production' > 

Обратите внимание, что мы удалили EnvironmentPlugin . Дело в том, что после установки mode в значение production вебпак автоматически присваивает process.env.NODE_ENV значение production . Это также минифицирует код и удаляет предупреждения.

Запуск вебпака

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

У нас есть файл package.json , в котором мы можем создать script для запуска webpack .

"scripts":

Теперь при выполнении команды npm run build в терминале будет запущен вебпак, который создаст оптимизированный бандл index_bundle.js и поместит его в dist .

Режимы разработки и продакшна

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

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

Для переключения между режимами необходимо создать два скрипта в package.json .

npm run build будет собирать продакшн-бандл.

npm run start будет запускать сервер для разработки и следить за изменениями файлов.

Если помните, мы установили mode в значение production в настроках вебпака. Однако теперь нам это не нужно. Мы хотим, чтобы переменная среды имела соответствующее значение в зависимости от выполняемой команды. Немного изменим скрипт build в package.json .

"scripts":

Если у вас Windows, то команда будет такой: «SET NODE_ENV=’production’ && webpack» .

Теперь в настроках вебпака мы можем менять значение mode в зависимости от process.env.NODE_ENV .

. mode: process.env.NODE_ENV === 'production' ? 'production' : 'development' > 

Для сборки готового бандла для нашего приложения мы просто запускаем npm run build в терминале. В директории dist создаются файлы index.html и index_bunlde.js .

Сервер для разработки

Когда речь идет о разработке приложения принципиально важное значение имеет скорость. Мы не хотим презапускать вебпак и ждать новую сборку при каждом изменении. Вот где нам пригодится пакет webpack-dev-server .

Как следует из названия, это вебпак-сервер для разработки. Вместо создания дирекории dist , он хранит данные в памяти и обрабатывает их на локальном сервере. Более того, он поддерживает живую перезагрузку. Это означает, что при любом изменении webpack-dev-server пересоберет файлы и перезапустит браузер.

npm i webpack-dev-server -D 

Все, что осталось сделать, это добавить скрипт start в package.json .

"scripts":

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

Надеюсь, статья была вам полезной. Благодарю за внимание.

Ошибка при запуске webpack-dev-server

Только начал изучать webpack. При попытке запустить webpack-dev-server выдает ошибку:

‘webpack-dev-server’ is not recognized as an internal or external command, operable program or batch file.

npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] dev: `webpack-dev-server` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] dev script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\USER\AppData\Roaming\npm-cache\_logs\2020-10-08T20_01_35_206Z-debug.log 

Вот package.json:

< "name": "my", "version": "1.0.0", "description": "", "main": "app.js", "scripts": < "dev": "webpack-dev-server", "build": "webpack" >, "author": "", "license": "ISC", "devDependencies": < "webpack": "^4.44.2", "webpack-cli": "^3.3.12" >> 

И webpack.config.js:

const path = require('path'); module.exports = < entry: < app: './js/app.js' >, context: path.resolve(__dirname, 'src'), output: < filename: 'bundle.js', path: path.resolve(__dirname, 'dist') >, devServer: < publicPath: '/', port: 9000, contentBase: path.join(process.cwd(), 'dist'), host: 'localhost', historyApiFallback: true, noInfo: false, stats: 'minimal', hot: true, >, mode: 'development' > 

Как решить данную проблему?

Что такое 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 проанализирует файлы и объединит их в один выходной JavaScript-файл, содержащий все необходимое для запуска приложения.

Установка Webpack

Webpack может быть установлен глобально или локально для каждого проекта.

Глобальная установка

Глобальная установка с помощью Yarn:

yarn global add webpack webpack-cli

npm i -g webpack webpack-cli

Теперь мы можем запустить webpack:

webpack-cli

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

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

Установка с помощью Yarn:

yarn add webpack webpack-cli -D

npm i webpack webpack-cli --save-dev

После этого добавьте эти строчки в свой package.json файл:

 < 
//. 
"scripts": < 
"build": "webpack" 
> 
>

Как только все будет сделано, вы можете запустить Webpack, набрав:

yarn build

в корневом каталоге проекта.

Настройка Webpack

По умолчанию, Webpack (начиная с 4-й версии) не требует никакой настройки, если вы соблюдаете эти правила:

• точкой входа вашего приложения является ./src/index.js
• вывод (output) размещается в ./dist/main.js
• Webpack работает в production mode (режим производства)

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

Точка входа

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

module.exports = /*. */ 
entry: './index.js' 
/*. */
>

Вывод (output)

По умолчанию, вывод размещается в ./dist/main.js . В нижеприведенном примере, результат работы в Webpack генерируется в файле app.js :

module.exports = /*. */ 
output: path: path.resolve(__dirname, 'dist'), 
filename: 'app.js' 
> 
/*. */
>

С помощью Webpack можно использовать оператор import или require в своем JavaScript коде для того, чтобы подключать файлы любого типа (например, CSS).

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

Например, в своем коде вы можете использовать:

import 'style.css' 

указав конфигурацию данного загрузчика в файле webpack.config.js :

module.exports = /*. */ 
module: rules: [ 
< test: /\.css$/, use: 'css-loader' >, 
>] 
> 
/*. */
>

Регулярное выражение применяет данный загрузчик только к CSS файлам.

У загрузчика есть параметры:

module.exports = /*. */ 
module: rules: [ 
 test: /\.css$/, 
use: [ 
 loader: 'css-loader', 
options: modules: true 
> 
> 
] 
> 
] 
> 
/*. */
>

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

module.exports = /*. */ 
module: rules: [ 
 test: /\.css$/, 
use: 
[ 
'style-loader', 
'css-loader', 
] 
> 
] 
> 
/*. */
>

В этом примере css-loader интерпретирует директиву import ‘style.css’ в CSS. Затем style-loader внедряет этот CSS в DOM, используя тег .

Порядок выполнения перевернут (последнее выполняется первым).

Так сколько всего существует загрузчиков? Очень много! Здесь вы сможете найти полный список.

Самым часто используемым загрузчиком является Babel — он используется для транспиляции современного JavaScript в ES5:

module.exports = /*. */ 
module: rules: [ 
 test: /\.js$/, 
exclude: /(node_modules|bower_components)/, 
use: loader: 'babel-loader', 
options: presets: ['@babel/preset-env'] 
> 
> 
> 
] 
> 
/*. */
>

Данный пример заставляет Babel предварительно обрабатывать все наши React/JSX файлы:

module.exports = /*. */ 
module: rules: [ 
 test: /\.(js|jsx)$/, 
exclude: /node_modules/, 
use: 'babel-loader' 
> 
] 
>, 
resolve: extensions: [ 
'.js', 
'.jsx' 
] 
> 
/*. */
>

Здесь вы можете увидеть параметры babel-loader .

Плагины

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

Рассмотрим следующий пример:

module.exports = /*. */ 
plugins: [ 
new HTMLWebpackPlugin() 
] 
/*. */
>

Плагин HTMLWebpackPlugin автоматически создает HTML-файл с уже подключенным скриптом.

Здесь доступно множество плагинов.

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

module.exports = /*. */ 
plugins: [ 
new CleanWebpackPlugin(['dist']), 
] 
/*. */
>

Режимы Webpack

Данные режимы (появившиеся в 4-й версии Webpack) настраивают среду, в которой будет работать Webpack. Режим может быть настроен на development или production (по умолчанию стоит production ).

module.exports = entry: './index.js', 
mode: 'development', 
output: path: path.resolve(__dirname, 'dist'), 
filename: 'app.js' 
>
>

• менее оптимизирован, чем production
• работает быстрее
• не удаляет комментарии
• предоставляет более подробные сообщения об ошибках и способы их решения
• сильно облегчает отладку

Режим production работает медленнее, чем development , так как ему нужно создать более оптимизированный бандл. Полученный JavaScript файл меньше по размеру, поскольку многое из режима development в нем отсутствует.

Я написал небольшое приложение, которое выводит содержимое console.log .

Вот бандл production :

Вот бандл development :

Запуск Webpack

Если Webpack установлен глобально, его можно вручную запустить из командной строки. Но, обычно, вы прописываете скрипт внутри файла package.json , который затем запускаете через npm или yarn .

Например, эти package.json скрипты, которые мы использовали ранее:

"scripts": "build": "webpack"
>

позволяют запускать webpack , набрав:

npm run build

yarn run build

yarn build

Просмотр изменений

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

"scripts": "watch": "webpack --watch"
>

и запустите данную функцию:

npm run watch

yarn run watch

yarn watch

Одной из приятных особенностей watch mode (режима просмотра) является то, что бандл изменяется только в том случае, если в сборке нет ошибок. Если ошибки присутствуют, watch продолжит следить за изменениями и будет пытаться перестраивать бандл, но текущий, рабочий бандл не зависит от проблемных бандлов.

Обработка изображений

С помощью Webpack можно очень удобно работать с изображениями, используя загрузчик file-loader .

Эта простая конфигурация:

module.exports = /*. */ 
module: rules: [ 
 test: /\.(png|svg|jpg|gif)$/, 
use: [ 
'file-loader' 
] 
> 
] 
> 
/*. */
>

Позволяет импортировать изображения в ваш JavaScript:

import Icon from './icon.png'const img = new Image()
img.src = Icon
element.appendChild(img)

Где img — это HTMLImageElement. Ознакомьтесь с документацией по Image().

file-loader может обрабатывать и другие типы ассетов, например, шрифты, CSV-файлы, XML и т.д.

Еще одним приятным инструментом для работы с изображениями является url-loader загрузчик.

В этом примере загружается любой PNG-файл размером менее 8 КБ в качестве data:URL.

module.exports = /*. */ 
module: rules: [ 
 test: /\.png$/, 
use: [ 
 loader: 'url-loader', 
options: limit: 8192 
> 
> 
] 
> 
] 
> 
/*. */
>

Обработайте SASS код и преобразуйте его в CSS

Используйте sass-loader , css-loader и style-loader :

module.exports = /*. */ 
module: rules: [ 
 test: /\.scss$/, 
use: [ 
'style-loader', 
'css-loader', 
'sass-loader' 
] 
> 
] 
> 
/*. */
>

Генерация Source Maps

С транспилированным кодом, зачастую, возникают проблемы при отладке кода в браузере или анализе ошибок. Так как транспилированный и трудночитаемый JavaScript, а не оригинальный код, затрудняет поиск и исправление ошибок. Source Map — это JSON-файл, который содержит информацию о том, как транспилировать код обратно в исходный код.

Source Maps можно сгенерировать, используя свойство конфигурации devtool :

module.exports = /*. */ 
devtool: 'inline-source-map', 
/*. */
>

devtool имеет множество возможных значений, из которых наиболее часто используемые:

• none : не добавляет Source Maps
• source-map : идеально подходит для режима production , предоставляет отдельную Source Map, которую можно свернуть и добавляет ссылку в бандл, чтобы инструменты разработки знали о том, что Source Map доступна
• inline-source-map : идеально подходит для режима development , встраивает Source Maps в качестве data:URL

Webpack

Webpack — сборщик модулей, который позволяет скомпилировать JavaScript-модули в единый JS-файл. Также работает с TypeScript, CoffeeScript, его можно использовать совместно с Node.js. Webpack реализован как программа, которая при запуске обрабатывает модули, строит между ними граф зависимостей, а потом на основе графа генерирует единый файл.

Освойте профессию «Frontend-разработчик»

Кто пользуется Webpack

• Frontend-разработчики, которые используют в работе JavaScript и его фреймворки.
• Backend-разработчики, пишущие серверную часть сайта или веб-приложения с помощью Node.js.
• Программисты на TypeScript и CoffeeScript — языках на базе JS, которые применяются во фронтенде и иногда в бэкенде.

Профессия / 9 месяцев
Frontend-разработчик

Создавайте интерфейсы сервисов, которыми пользуются все

Для чего нужен Webpack

• для быстрого объединения множества JavaScript-файлов в один большой;
• более легкого подключения кода JS к HTML-странице;
• транспиляции, или перевода кода на TypeScript или CoffeeScript на «чистый» JavaScript;
• подготовки файлов к размещению на сервере для их оптимизации;
• адаптации кода к старым версиям браузера;
• тестирования написанного кода с помощью локального сервера, где запускается собранный проект;
• разнообразных преобразований кода и выполнения дополнительных действий.

Понятия Webpack

Entry. Точка входа — файл, с которого сборщик начинает объединять модули. Обычно это основной JS-файл проекта, и от него зависят все остальные.

Output. Точка выхода — файл, в который запишется собранный проект. При настройке Webpack в качестве точки выхода указывают путь к конечному файлу.

Bundle. Бандл — собранный из модулей большой файл, результат работы сборщика.

Loaders. Они же лоадеры, или загрузчики — дополнительные сущности, которые расширяют возможности Webpack по преобразованию. По умолчанию сборщик распознает только файлы JS и JSON. С помощью лоадеров можно «научить» его понимать и другие файлы, от таблиц стилей CSS до изображений. Загрузчики скачиваются отдельно.

Plugins. Плагины — второй вид дополнительных сущностей. Это надстройки для решения дополнительных задач, например автоматического создания HTML-файла, к которому подключается бандл. Они тоже скачиваются отдельно.

Режимы. Режимы работы — наборы настроек для разных задач.

• Режим production — для финальной сборки перед загрузкой на сервер. Предусматривает максимальную оптимизацию и сжатие кода.
• Режим development — для тестовых сборок, которые нужны при разработке. Упор делается не на оптимизацию, а на читаемость. Можно скачать дополнительный модуль webpack-dev-server и запустить локальный сервер для тестирования проекта. С ним проект будет пересобираться при каждом изменении кода, и эти изменения будут применяться в реальном времени.
• Режим none не предусматривает оптимизации и отключает ее настройки.

По умолчанию Webpack работает в режиме none.

Станьте Frontend-разработчиком
и создавайте интерфейсы сервисов, которыми пользуются все

Как работает сборщик

1. Перед началом работы программист создает в папке проекта файл webpack.config.js. Он нужен для его настройки. Чтобы файл заработал, сборщик уже должен быть установлен.
2. В файле разработчик прописывает настройки сборщика для проекта. Он указывает точку входа и выхода, лоадеры и плагины, которые нужно применить при сборке. Там же можно установить режим работы — production или development.
3. В настройках менеджера пакетов npm разработчик указывает условия для запуска Webpack. Теперь при выполнении определенной команды запустится сборщик.
4. При запуске Webpack использует файл конфигурации webpack.config.js, где пользователь ранее указал настройки. Он находит файлы, связанные с точкой входа, строит граф их зависимостей, а потом собирает все в единый бандл на основе графа. Так бандл получается корректным, и все в нем подключается в правильном порядке.

Как начать работу с Webpack

Webpack можно скачать бесплатно из официального репозитория на GitHub либо установить с помощью менеджеров пакетов npm или Yarn. Инструмент может быть установлен глобально либо локально для каждого проекта.

Глобальная установка

npm i -g webpack webpack-cli

yarn global add webpack webpack-cli

Теперь можно запустить Webpack:

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

yarn add webpack webpack-cli -D

npm i webpack webpack-cli —save-dev

После этого нужно добавить строки в package.json файл:

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

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

Frontend-разработчик

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

Статьи по теме: