Webpack: настраиваем сборку приложения
2026-03-10 21:38 Diff
https://otus.ru/nest/post/298/

Теги: javascript, jsx, nodejs, export, features, минификация, index.js, bundle, typescript, loader, babel-loader, preset, транспайлинг, es2015, webpack, сборщик, сборка приложения

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

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

module.exports = { mode: "production", entry: "./app/entry", output: { path: "./dist", filename: "bundle.js" }, module: { rules: [ { test: /\.jsx?$/, loader: "babel-loader", options: { presets: ["es2015"] } } ] }, resolve: { modules: [ "node_modules", "./app" ], extensions: [".js", ".json", ".jsx", ".css"], }, devServer: { proxy: { '/api': 'http://localhost:3000' } }, plugins: [ new HtmlWebpackPlugin() ] }

Разберёмся:

Всё-таки мы в NodeJS окружении и так пишется export.

Режим, в котором webpack собирает ваше приложение:

В зависимости от него включаются или выключаются различные features, например, минификация. Точка входа для сборки, обычно это index.js клиентской части:

Собственно, результат работы webpack:

output: { path: "./dist", filename: "bundle.js" },

Туда будет складываться, так называемый бандл (bundle) – результат объединения всех связанных JS, начиная с точки входа.

Помимо JS, туда будут генерироваться HTML и другие файлы, генерируемые плагинами.

Есть секция, где настраивается сам модуль – та часть приложения, которая собирается Webpack:

В этой секции настраиваются правила обработки файлов и import-ов.

Webpack позволяет импортировать не только js-файлы, но и написанные на диалектах TypeScript, JSX, и даже позволяет импортировать картинки!

Вот как раз пример настройки loader-а – обработчика import-ов:

{ test: /\.jsx?$/, loader: "babel-loader", options: { presets: ["es2015"] } }

К файлам с данным расширением будет применяться babel-loader (babel) с набором плагинов (уже babel-а), называемых preset-ом, предназначенных для транспайлинга ES2015.

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

resolve: { modules: [ "node_modules", "./app" ], extensions: [".js", ".json", ".jsx", ".css"], },

Одна из прекрасных возможностей Webpack – дев-сервер в режиме проксирования:

devServer: { proxy: { '/api': 'http://localhost:3000' } }

Если вы разрабатываете UI для сложного backend-а, то здесь вы можете указать адрес сервера и все запросы от вашего UI будут проксироваться на этот сервер!

Есть вопросы? Напишите в комментариях!