0 added
0 removed
Original
2026-01-01
Modified
2026-03-10
1
<p>Теги: javascript, jsx, nodejs, export, features, минификация, index.js, bundle, typescript, loader, babel-loader, preset, транспайлинг, es2015, webpack, сборщик, сборка приложения</p>
1
<p>Теги: javascript, jsx, nodejs, export, features, минификация, index.js, bundle, typescript, loader, babel-loader, preset, транспайлинг, es2015, webpack, сборщик, сборка приложения</p>
2
<p><strong>Webpack</strong>- один из самых быстрых, мощных и гибких сборщиков. На сегодняшний день он обладает также уникальными возможностями. Сравнительно недавно вышла новая версия<strong>Webpack</strong>и в этой заметке я поделюсь с вами тем, как настроить сборку вашего приложения, а также расскажу про некоторые возможности<strong>Webpack</strong>.</p>
2
<p><strong>Webpack</strong>- один из самых быстрых, мощных и гибких сборщиков. На сегодняшний день он обладает также уникальными возможностями. Сравнительно недавно вышла новая версия<strong>Webpack</strong>и в этой заметке я поделюсь с вами тем, как настроить сборку вашего приложения, а также расскажу про некоторые возможности<strong>Webpack</strong>.</p>
3
<p>И чтобы собрать проект, как и любому другому уважающему себя сборщику,<strong>Webpack</strong>также необходим файл конфигурации:</p>
3
<p>И чтобы собрать проект, как и любому другому уважающему себя сборщику,<strong>Webpack</strong>также необходим файл конфигурации:</p>
4
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() ] }<h2>Разберёмся:</h2>
4
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() ] }<h2>Разберёмся:</h2>
5
<p>Всё-таки мы в<strong>NodeJS</strong>окружении и так пишется<strong>export</strong>.</p>
5
<p>Всё-таки мы в<strong>NodeJS</strong>окружении и так пишется<strong>export</strong>.</p>
6
<p>Режим, в котором<strong>webpack</strong>собирает ваше приложение:</p>
6
<p>Режим, в котором<strong>webpack</strong>собирает ваше приложение:</p>
7
<p>В зависимости от него включаются или выключаются различные<strong>features</strong>, например, минификация. Точка входа для сборки, обычно это<strong>index.js</strong>клиентской части:</p>
7
<p>В зависимости от него включаются или выключаются различные<strong>features</strong>, например, минификация. Точка входа для сборки, обычно это<strong>index.js</strong>клиентской части:</p>
8
<p>Собственно, результат работы webpack:</p>
8
<p>Собственно, результат работы webpack:</p>
9
output: { path: "./dist", filename: "bundle.js" },<p>Туда будет складываться, так называемый бандл (<strong>bundle</strong>) - результат объединения всех связанных JS, начиная с точки входа.</p>
9
output: { path: "./dist", filename: "bundle.js" },<p>Туда будет складываться, так называемый бандл (<strong>bundle</strong>) - результат объединения всех связанных JS, начиная с точки входа.</p>
10
<p>Помимо JS, туда будут генерироваться HTML и другие файлы, генерируемые плагинами.</p>
10
<p>Помимо JS, туда будут генерироваться HTML и другие файлы, генерируемые плагинами.</p>
11
<p>Есть секция, где настраивается сам модуль - та часть приложения, которая собирается<strong>Webpack</strong>:</p>
11
<p>Есть секция, где настраивается сам модуль - та часть приложения, которая собирается<strong>Webpack</strong>:</p>
12
<p>В этой секции настраиваются правила обработки файлов и import-ов.</p>
12
<p>В этой секции настраиваются правила обработки файлов и import-ов.</p>
13
<p><strong>Webpack</strong>позволяет импортировать не только js-файлы, но и написанные на диалектах<strong>TypeScript</strong>,<strong>JSX</strong>, и даже позволяет импортировать картинки!</p>
13
<p><strong>Webpack</strong>позволяет импортировать не только js-файлы, но и написанные на диалектах<strong>TypeScript</strong>,<strong>JSX</strong>, и даже позволяет импортировать картинки!</p>
14
<p>Вот как раз пример настройки<strong>loader</strong>-а - обработчика<strong>import</strong>-ов:</p>
14
<p>Вот как раз пример настройки<strong>loader</strong>-а - обработчика<strong>import</strong>-ов:</p>
15
{ test: /\.jsx?$/, loader: "babel-loader", options: { presets: ["es2015"] } }<p>К файлам с данным расширением будет применяться<strong>babel-loader</strong>(<strong>babel</strong>) с набором плагинов (уже<strong>babel</strong>-а), называемых<strong>preset</strong>-ом, предназначенных для<strong>транспайлинга ES2015</strong>.</p>
15
{ test: /\.jsx?$/, loader: "babel-loader", options: { presets: ["es2015"] } }<p>К файлам с данным расширением будет применяться<strong>babel-loader</strong>(<strong>babel</strong>) с набором плагинов (уже<strong>babel</strong>-а), называемых<strong>preset</strong>-ом, предназначенных для<strong>транспайлинга ES2015</strong>.</p>
16
<p>В данной секции вы можете указать, где будут находиться родительские папки импортируемых вами файлов:</p>
16
<p>В данной секции вы можете указать, где будут находиться родительские папки импортируемых вами файлов:</p>
17
resolve: { modules: [ "node_modules", "./app" ], extensions: [".js", ".json", ".jsx", ".css"], },<p>Одна из прекрасных возможностей<strong>Webpack</strong>- дев-сервер в режиме проксирования:</p>
17
resolve: { modules: [ "node_modules", "./app" ], extensions: [".js", ".json", ".jsx", ".css"], },<p>Одна из прекрасных возможностей<strong>Webpack</strong>- дев-сервер в режиме проксирования:</p>
18
devServer: { proxy: { '/api': 'http://localhost:3000' } }<p>Если вы разрабатываете UI для сложного backend-а, то здесь вы можете указать адрес сервера и все запросы от вашего UI будут проксироваться на этот сервер!</p>
18
devServer: { proxy: { '/api': 'http://localhost:3000' } }<p>Если вы разрабатываете UI для сложного backend-а, то здесь вы можете указать адрес сервера и все запросы от вашего UI будут проксироваться на этот сервер!</p>
19
<p><em>Есть вопросы? Напишите в комментариях!</em></p>
19
<p><em>Есть вопросы? Напишите в комментариях!</em></p>
20
20