Что такое 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
Официальное руководство по включению и объединению CSS и JavaScript Bootstrap в ваш проект с помощью Webpack.
На этой странице На этой странице
Хотите перейти к концу? Загрузите исходный код и рабочую демонстрацию для этого руководства из репозитория twbs/examples. Вы также можете открыть пример в StackBlitz для редактирования в реальном времени.
Установка
Мы создаем проект Webpack с Bootstrap с нуля, поэтому есть некоторые предварительные условия и предварительные шаги, прежде чем мы действительно сможем начать. Это руководство требует, чтобы у вас был установлен Node.js и вы немного знакомы с терминалом.
-
Создайте папку проекта и установите npm. Мы создадим папку my-project и инициализируем npm с аргументом -y , чтобы он не задавал нам все интерактивные вопросы.
mkdir my-project && cd my-project npm init -y
npm i --save-dev webpack webpack-cli webpack-dev-server
npm i --save bootstrap @popperjs/core
npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader
Теперь, когда у нас установлены все необходимые зависимости, мы можем приступить к созданию файлов проекта и импорту Bootstrap.
Структура проекта
Мы уже создали папку my-project и инициализировали npm. Теперь мы также создадим наши папки src и dist , чтобы завершить структуру проекта. Запустите следующее из my-project или вручную создайте структуру папок и файлов, показанную ниже.
mkdir dist,src,src/js,src/scss> touch dist/index.html src/js/main.js src/scss/styles.scss webpack.config.js
Когда вы закончите, ваш полный проект должен выглядеть так:
my-project/ ├── dist/ │ └── index.html ├── src/ │ ├── js/ │ │ └── main.js │ └── scss/ │ └── styles.scss ├── package-lock.json ├── package.json └── webpack.config.js
На данный момент все в порядке, но Webpack не будет работать, потому что мы еще не заполнили наш webpack.config.js .
Кофигурация Webpack
С установленными зависимостями и готовой папкой проекта для начала написания кода мы теперь можем настроить Webpack и запустить наш проект локально.
-
Откройте webpack.config.js в вашем редакторе. Поскольку он пуст, нам нужно добавить в него шаблонную конфигурацию, чтобы мы могли запустить наш сервер. Эта часть конфигурации сообщает Webpack, что нужно искать JavaScript нашего проекта, куда выводить скомпилированный код ( dist ) и как должен вести себя сервер разработки (извлечение из папки dist с горячей перезагрузкой).
const path = require('path') module.exports = entry: './src/js/main.js', output: filename: 'main.js', path: path.resolve(__dirname, 'dist') >, devServer: static: path.resolve(__dirname, 'dist'), port: 8080, hot: true > >
html lang="en"> head> meta charset="utf-8"> meta name="viewport" content="width=device-width, initial-scale=1"> title>Bootstrap w/ Webpacktitle> head> body> div class="container py-4 px-3 mx-auto"> h1>Hello, Bootstrap and Webpack!h1> button class="btn btn-primary">Primary buttonbutton> div> script src="./main.js">script> body> html>
// . "scripts": "start": "webpack serve --mode development", "test": "echo \"Error: no test specified\" && exit 1" >, // . >
npm start
В следующем и последнем разделе этого руководства мы настроим загрузчики Webpack и импортируем весь CSS и JavaScript Bootstrap.
Импорт Bootstrap
Для импорта Bootstrap в Webpack требуются загрузчики, которые мы установили в первом разделе. Мы установили их с помощью npm, но теперь необходимо настроить Webpack для их использования.
-
Настройте загрузчики в webpack.config.js . Ваш файл конфигурации готов и должен соответствовать приведенному ниже фрагменту. Единственная новая часть здесь — раздел module .
const path = require('path') module.exports = entry: './src/js/main.js', output: filename: 'main.js', path: path.resolve(__dirname, 'dist') >, devServer: static: path.resolve(__dirname, 'dist'), port: 8080, hot: true >, module: rules: [ test: /\.(scss)$/, use: [ loader: 'style-loader' >, loader: 'css-loader' >, loader: 'postcss-loader', options: postcssOptions: plugins: () => [ require('autoprefixer') ] > > >, loader: 'sass-loader' > ] > ] > >
// Import all of Bootstrap's CSS @import "~bootstrap/scss/bootstrap";
// Импортируйте наш пользовательский CSS import '../scss/styles.scss' // Импортируйте весь JS Bootstrap import * as bootstrap from 'bootstrap'
Вы также можете импортировать плагины JavaScript по отдельности, если это необходимо, чтобы уменьшить размеры пакетов:
import Alert from 'bootstrap/js/dist/alert' // или укажите, какие плагины вам нужны: import Tooltip, Toast, Popover > from 'bootstrap'
Прочитайте нашу документацию по JavaScript для получения дополнительной информации о том, как использовать плагины Bootstrap.
Видите здесь что-то неправильное или устаревшее? Пожалуйста, откройте вопрос на GitHub. Нужна помощь в устранении неполадок? Выполните поиск или начните обсуждение на GitHub.
Webpack: руководство для начинающих
Представляю вашему вниманию перевод статьи «Webpack: A gentle introduction» автора Tyler McGinnis.
Перед изучением новой технологии задайте себе два вопроса:
- Зачем нужен этот инструмент?
- Какие задачи он выполняет?
Зачем нужен вебпак?
Вебпак — это сборщик модулей. Он анализирует модули приложения, создает граф зависимостей, затем собирает модули в правильном порядке в один или более бандл (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 = <>
Основной задачей вебпака является анализ модулей, их опциональное преобразование и интеллектуальное объединение в один или более бандл, поэтому вебпаку нужно знать три вещи:
- Точка входа приложения
- Преобразования, которые необходимо выполнить
- Место, в которое следует поместить сформированный бандл
Точка входа
Сколько бы модулей не содержало приложение, всегда имеется единственная точка входа. Этот модуль включает в себя остальные. Обычно, таким файлом является 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' >>
Весь процесс выглядит примерно так:
- Вебпак получает точку входа, находящуюся в ./app/index.js
- Он анализирует операторы import / require и создает граф зависимостей
- Вебпак начинает собирать бандл, преобразовывая код с помощью соответствующих лоадеров
- Он собирает бандл и помещает его в 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
Webpack — это сборщик модулей для JavaScript-приложений. Он позволяет разделять код на модули, которые затем могут быть импортированы и использованы в других частях приложения. Это полезно для структурирования кода, оптимизации производительности и поддержки сторонних библиотек.
Подробнее о Webpack мы писали в другой статье, а пока давайте создадим простой проект, который складывает два числа, а заодно научимся пользоваться Webpack.
Подготовка
Для начала установите Node.js с официального сайта https://nodejs.org, если у вас его ещё нет. Затем создайте новую папку для проекта и перейдите в нее с помощью командной строки или терминала. В нашем случае это папка two_numbers , но у вас может быть любая другая.
mkdir two_numbers cd two_numbers
Инициализация проекта
Находясь внутри папки, инициализируйте проект с помощью следующей команды:
npm init -y
Эта команда создаст файл package.json , который является основным файлом для управления зависимостями и настройками проекта на Node.js.
Параметр -y означает, что все вопросы, которые обычно задаются при создании файла package.json , будут пропущены, и будут использованы значения по умолчанию. В результате будет создан файл package.json с минимальными настройками, без дополнительного ввода со стороны пользователя.
Он выглядит примерно так:
< "name": "two_numbers", "version": "1.0.0", "description": "", "main": "index.js", "scripts": < "start": "webpack serve", "build": "webpack" >, "keywords": [], "author": "", "license": "ISC", "devDependencies": < "css-loader": "^6.7.3", "style-loader": "^3.3.2", "webpack": "^5.78.0", "webpack-cli": "^5.0.1", "webpack-dev-server": "^4.13.2" >>
Установка webpack, webpack-cli и webpack-dev-server
Установите webpack , webpack-cli и webpack-dev-server с помощью следующей команды:
npm install webpack webpack-cli webpack-dev-server --save-dev
Команда webpack-cli позволит запускать Webpack из терминала.
webpack-dev-server — это удобный сервер разработки с горячей перезагрузкой. Это означает, что при изменении файлов в вашем проекте сервер автоматически пересоберёт сборку и обновит страницу в браузере. Без этого пакета вам придется самостоятельно настраивать сервер разработки и обновлять страницу в браузере после каждого изменения в коде.
О ключе —save-dev мы уже писали в одной из статей журнала.
Установка css-loader и style-loader
Webpack по умолчанию обрабатывает только JavaScript-файлы, поэтому для корректной работы с другими типами файлов, такими как CSS или HTML, необходимы специальные загрузчики и плагины.
css-loader позволяет Webpack обрабатывать и импортировать CSS в JavaScript-файлы. Он интерпретирует @import и url() как import/require() и разрешает их. В результате, после обработки css-loader , ваш CSS будет представлен в виде строки в JavaScript-коде.
style-loader . Поскольку после обработки css-loader ваш CSS превратился в строку JavaScript, style-loader используется для внедрения этих стилей в DOM. style-loader добавляет тег внутри вашего HTML-файла, содержащий все стили, включенные в сборку.
Таким образом, чтобы импортировать CSS в наш проект, нам нужно установить style-loader и css-loader . Для этого выполните следующую команду:
npm install style-loader css-loader --save-dev
Установка html-webpack-plugin
html-webpack-plugin автоматически генерирует HTML-файл на основе шаблона, вставляет туда ссылки на ваши файлы (например, JavaScript и CSS), и сохраняет его в указанной директории (обычно в папке dist )
npm install html-webpack-plugin --save-dev
C подготовкой и установкой закончили, теперь переходим к структуре проекта и коду.
Структура проекта
Для удобства откройте папку с проектом прямо в VS Code через меню Файл→Открыть папку (File→Open Folder). В итоге слева будет находиться структура проекта и все файлы, а справа вы будете их редактировать.
В корне проекта создайте пустой файл webpack.config.js и добавьте туда следующий код базовой конфигурации проекта. Обратите внимание на поясняющие комментарии.
const path = require('path'); // Импортируем модуль "path" для работы с путями файлов const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = < entry: './src/index.js', // Точка входа для сборки проекта output: < filename: 'bundle.js', // Имя выходного файла сборки path: path.resolve(__dirname, 'dist'), // Путь для выходного файла сборки >, module: < rules: [ < test: /\.css$/, // Регулярное выражение для обработки файлов с расширением .css use: ['style-loader', 'css-loader'], // Загрузчики, используемые для обработки CSS-файлов >, ], >, plugins: [ new HtmlWebpackPlugin(< template: './src/index.html', >), ], devServer: < static: < directory: path.join(__dirname, 'dist'), // Каталог для статики >, open: true, // Автоматически открывать браузер >, mode: 'development', // Режим сборки >;
В файле package.json измените поле scripts на следующее:
"scripts": < "start": "webpack serve", "build": "webpack" >,
Это позволит запускать сервер разработки и сборку проекта с помощью кратких и удобных команд npm start и npm run build , вместо того чтобы вводить полные команды в терминал каждый раз.
Теперь создайте внутри проекта папку src , а в ней пустой файл index.js . В этом файле напишем основной код приложения, которое складывает два числа из текстовых полей.
function addNumbers() < const num1 = parseFloat(document.getElementById("number1").value); const num2 = parseFloat(document.getElementById("number2").value); const result = num1 + num2; document.getElementById("result").innerText = `Result: $`; > document.getElementById("calculate").addEventListener("click", addNumbers);
Теперь создайте в той же папке файл index.html и добавьте туда этот код:
Калькулятор сложения
В папке src создайте файл styles.css и добавьте следующий код:
body < display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; >input, button, p
Итоговая структура проекта после всех действий будет выглядеть так:
Теперь ваш проект готов к использованию. Для запуска сервера разработки выполните следующую команду в терминале:
npm start
Webpack автоматически откроет браузер, и вы увидите страницу с текстовыми полями для ввода чисел и кнопкой Add. Также после запуска сервера вы можете перейти по адресу localhost:8082 .
В открывшемся окне ведите два числа и нажмите кнопку Add для выполнения сложения. Результат будет отображаться под кнопкой. Готово!
Так зачем использовать Webpack
Webpack позволяет легко структурировать код, разделяя его на модули и импортируя их при необходимости. Если в дальнейшем вы решите добавить сторонние библиотеки или фреймворки, то Webpack поможет вам интегрировать их в ваш проект, минимизировать размер файла сборки и улучшить производительность. А с использованием webpack-dev-server вы получаете автоматическую перезагрузку страницы при изменении исходного кода, что ускоряет процесс разработки.
В этом примере мы использовали только базовые возможности Webpack, но с его помощью вы можете сделать гораздо больше, например, обрабатывать и минифицировать CSS, использовать различные загрузчики (loaders) и плагины для транспиляции и оптимизации кода.
Если хотите лучше разобраться в Webpack, записывайтесь на курс — там узнаете все подробности и научитесь использовать Webpack как профи.
Дальше
- Что такое Webpack
- Как копировать статические файлы с помощью Webpack
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Dev Mode в Figma. Быстрый обзор бета-версии
Если вы читаете эту статью, Dev Mode в Figma наконец-то вышел в открытую бету. Быстренько рассказываем, что это такое, и как его включить и настроить.
Раньше верстальщикам была доступна только вкладка Inspect с базовой информацией о стилях конкретного элемента.
Некоторые разработчики не рекомендовали копировать стили оттуда, потому что всегда это работало с нюансами. Пока сложно сказать, насколько стили стали точнее, но работать стало определённо удобнее. Сами Adobe называют Figma новым пространством для разработчиков, с возможностями, которые помогают быстрее переводить дизайн в код. Давайте проверим.
- 10 августа 2023
Горячие клавиши Figma для быстрой работы
Figma — это инструмент для создания дизайна, который очень любят веб-разработчики. Одна из причин, почему Figma так популярна — это горячие клавиши. Они помогают работать быстрее и проще. Давайте рассмотрим самые важные из них.
Скрыть или показать интерфейс Фигмы (Ctrl + \ или ⌘ + \ для Mac)
Эта комбинация клавиш позволяет вам быстро убрать все лишнее с экрана, чтобы вы могли сосредоточиться на своем дизайне. Или, наоборот, показать все элементы интерфейса, если вам нужно что-то найти или изменить.
Быстрый поиск по меню (Ctrl + / или ⌘ + / для Mac)
Эта комбинация клавиш открывает поиск по меню. Это очень удобно, когда вы знаете, что вам нужно, но не помните, где это находится. Просто начните вводить то, что вы ищете, и Figma покажет вам нужный пункт меню. Если пользуетесь Spotlight или PowerToys, вам будет очень удобно.
А если не пользуетесь — попробуйте.
- 7 августа 2023
Старт в Figma для верстальщика
Figma — это онлайн-редактор графики для дизайнеров интерфейсов и веб-разработчиков. Это удобная, бесплатная альтернатива Photoshop.
Большое преимущество платформы — возможность работать прямо в браузере. При этом есть и десктопная версия. Расскажем, что надо знать верстальщику при работе с макетом в Figma.
- 2 августа 2023
Инструменты для работы со шрифтами
Работа со шрифтами и типографикой — важная часть вёрстки текста. Новые шрифты появляются очень часто, за этим сложно уследить. Существует множество инструментов, которые помогают находить нужные шрифты, управлять ими и улучшать внешний вид текста.
Рассмотрим несколько инструментов для работы со шрифтами, которые будут полезны при создании сайта.
- 29 июня 2023
10 горячих клавиш VS Code, которые ускорят вашу работу
Горячие клавиши — добро, польза и экономия времени. Давайте разберёмся, как с их помощью упростить себе жизнь в Visual Studio Code.
- 13 июня 2023
10 лучших тем для VS Code
VS Code — популярный редактор кода со множеством полезных инструментов. Сегодня мы поделимся с вами 10 темами, чтобы работать стало ещё приятнее. Выбирайте на свой вкус и цвет.
- 11 июня 2023
10 полезных плагинов VS Code для вёрстки
Visual Studio Code — один из самых популярных редакторов кода. Его удобно использовать, и у него есть множество полезных расширений, с помощью которых легко оптимизировать работу. Такие плагины помогают допускать меньше ошибок при написании кода, да и значительно сокращают время работы.
Чтобы установить расширения, перейдите во вкладку «Extensions» и в поиске найдите подходящие плагины.
- 9 июня 2023
17 полезных плагинов JavaScript в VS Code
Редактор кода Visual Studio Code помогает быстрее писать код, например, он подчёркивает ошибки красным цветом и показывает подсказки. Но работу можно сделать ещё приятнее, если установить нужное расширение.
Плагинов VS Code много. Здесь мы расскажем об одних из самых популярных — они пригодятся при работе с JavaScript.
- 6 июня 2023
Подборка микроанимаций для фронтенда с CodePen в 2023
⭐ Микроанимация — короткое взаимодействие, которое помогает пользователю лучше сориентироваться в интерфейсе и почувствовать совершенное действие.
Например, нажатие на кнопку лайка в социальных сетях или изменение фона, индикатор загрузки, и многое другое. Микроанимация используется везде, где есть интерфейс пользователя, а именно, веб-сайтах, мобильных приложениях, играх. На примерах с CodePen покажем, какими они бывают.
- 12 апреля 2023
Как скопировать файлы в каталог сборки
Webpack — это инструмент для сборки JavaScript-приложений, который также применяется для обработки статических файлов — изображений, шрифтов и других ресурсов. У Webpack множество функций, которые легко расширяются с помощью добавления плагинов.
Копирование статических файлов в каталог сборки — одна из таких функций. Выполнить эту задачу можно несколькими способами, наиболее простой — использование специального плагина CopyWebpackPlugin . Рассмотрим подробнее, как это делать.
Плагин CopyWebpackPlugin позволяет скопировать файлы из одного каталога в другой, сохраняя их иерархию.
Для начала установите CopyWebpackPlugin в свой проект:
npm install copy-webpack-plugin --save-dev
После установки настройте конфигурацию Webpack, добавив новый экземпляр плагина в секцию plugins конфига. Пример:
const CopyWebpackPlugin = require('copy-webpack-plugin'); const path = require('path'); module.exports = < // ваша конфигурация Webpack здесь plugins: [ new CopyWebpackPlugin(< patterns: [ < from: path.resolve(__dirname, 'src/assets'), to: path.resolve(__dirname, 'dist/assets') >] >) ] >;
В плагине содержится массив объектов patterns . Каждый объект patterns указывает на исходный файл или каталог назначения, куда копировать файлы. В примере указано, что нужно скопировать все файлы из каталога src/assets в dist/assets во время сборки.
Теперь все статические файлы будут скопированы в каталог сборки при запуске команды npm run build или той, которую вы используете для запуска сборки.
Научитесь работать с webpack и сократите время на разработку, сборку и тестирование проекта.
Копирование нескольких файлов
Для копирования нескольких файлов с помощью плагина CopyWebpackPlugin добавляем каждый каталог или файл в отдельный объект-шаблон в массиве patterns .
Каждый объект-шаблон содержит свойство from , оно указывает путь к файлу или каталогу для копирования. Свойство to — это путь, по которому нужно скопировать файлы или каталоги.
const CopyWebpackPlugin = require('copy-webpack-plugin'); module.exports = < //ваша конфигурация Webpack здесь plugins: [ new CopyWebpackPlugin(< patterns: [ < from: 'src/images', to: 'dist/images' >, < from: 'src/index.html', to: 'dist' >, ], >), ], >;
В примере первый объект-шаблон копирует каталог images из src в dist/images , а второй — копирует файл index.html из src в dist .
Добавляйте столько объектов-шаблонов, сколько нужно для копирования всех необходимых файлов и каталогов.
Для более детальной настройки копирования файлов существуют другие опции, доступные в CopyWebpackPlugin , их подробное описание можно прочитать в документации.
Другие способы
Кроме CopyWebpackPlugin , существуют и другие плагины и загрузчики, их также часто называют лоадерами, которые позволяют копировать статические файлы в каталог сборки.
Лоадер file-loader позволяет копировать статические файлы в указанную папку при сборке проекта.
Чтобы использовать file-loader , установите его с помощью npm :
npm install file-loader --save-dev
Затем добавьте его в конфигурационный файл webpack.config.js :
module.exports = < // . ваша конфигурация webpack . module: < rules: [ < test: /\.(png|jpe?g|gif)$/i, use: [ < loader: 'file-loader', options: < name: '[name].[ext]', outputPath: 'images/', >, >, ], >, ], >, >;
В этом примере file-loader используется для копирования файлов изображений в каталог images внутри каталога сборки.
Лоадер url-loader работает аналогично file-loader , но может преобразовывать маленькие файлы в Data URL, вместо копирования их в каталог сборки. Это может быть полезно для уменьшения количества запросов к серверу.
Для использования url-loader необходимо его установить:
npm install url-loader --save-dev
Затем добавить в конфигурационный файл webpack.config.js :
module.exports = < module: < rules: [ < test: /\.(png|jpg|gif)$/i, use: [ < loader: 'url-loader', options: < limit: 8192, >, >, ], >, ], >, >;
Поместите файлы, которые хотите скопировать, в соответствующий каталог в вашем проекте, например, в папку src/images . Если размер файла меньше 8 кБ, он будет встроен в виде Data URL. При сборке проекта все файлы будут обработаны и скопированы.
Описанные лоадеры ещё используются в разработке, но рекомендуем ознакомиться с новой версией Webpack и её обновлениями.
- 30 марта 2023