Differences

This shows you the differences between two versions of the page.

--- webpack [2021/08/20 14:11] – chifek
+++ webpack [2023/09/14 06:06] (current) – external edit 127.0.0.1
@@ Line 3: / Line 3: @@
 Официальный сайт webpack [[https://webpack.js.org]]
+Презентация Webpack
+{{:webpack.pptx}}
-Webpack это сборщик модулей, который умеет сам анализировать модули и файлы, которые используются на проекте.
+{{:74de6adc11.jpg?600|}}
-Используется для более сложных приложений.
 ===== Зачем нужен вебпак? =====
@@ Line 58: / Line 57: @@
 <code>npm i webpack webpack-cli -D</code>
+==== webpack.config.js ====
+После установки указанных пакетов, вебпак нужно настроить. Для этого создается файл webpack.config.js, который экспортирует объект. Этот объект содержит настройки вебпака.
+<code>module.exports = {}</code>
+Основной задачей вебпака является анализ модулей, их опциональное преобразование и интеллектуальное объединение в один или более бандл, поэтому вебпаку нужно знать три вещи:
+  - Точка входа приложения
+  - Преобразования, которые необходимо выполнить
+  - Место, в которое следует поместить сформированный бандл
+===== Настройка =====
+==== Точка входа ====
+Сколько бы модулей не содержало приложение, всегда имеется единственная точка входа. Этот модуль включает в себя остальные. Обычно, таким файлом является index.js. Это может выглядеть так:
+<code>
+index.js
+  imports about.js
+  imports dashboard.js
+    imports graph.js
+    imports auth.js
+      imports api.js
+      </code>
+Если мы сообщим вебпаку путь до этого файла, он использует его для создания графа зависимостей приложения. Для этого необходимо добавить свойство entry в настройки вебпака со значением пути к главному файлу:
+<code>
+module.exports = {
+    entry: './app/index.js'
+}
+</code>
+==== Преобразования с помощью лоадеров (loaders) ====
+После добавления точки входа, нужно сообщить вебпаку о преобразованиях, которые необходимо выполнить перед генерацией бандла. Для этого используются лоадеры.
+По умолчанию при создании графика зависимостей на основе операторов import / require() вебпак способен обрабатывать только JavaScript и JSON-файлы.
+<code>
+import auth from './api/auth' //
+import config from './utils/config.json' //
+import './styles.css' // ️
+import logo from './assets/logo.svg' // ️
+</code>
+Едва ли в своем приложении вы решитесь ограничиться JS и JSON-файлами, скорее всего, вам также потребуются стили, SVG, изображения и т.д. Вот где нужны лоадеры. Основной задачей лоадеров, как следует из их названия, является предоставление вебпаку возможности работать не только с JS и JSON-файлами.
+Первым делом нужно установить лоадер. Поскольку мы хотим загружать SVG, с помощью npm устанавливаем svg-loader.
+<code>
+npm i svg-inline-loader -D
+</code>
+Далее добавляем его в настройки вебпака. Все лоадеры включаются в массив объектов module.rules:
+<code>
+module.exports = {
+    entry: './app/index.js',
+    module: {
+        rules: []
+    }
+}
+</code>
+Информация о лоадере состоит из двух частей. Первая — тип обрабатываемых файлов (.svg в нашем случае). Вторая — лоадер, используемый для обработки данного типа файлов (svg-inline-loader в нашем случае).
+<code>
+module.exports = {
+  entry: './app/index.js',
+  module: {
+    rules: [
+      { test: /\.svg$/, use: 'svg-inline-loader' }
+    ]
+  }
+}
+</code>
+Теперь мы можем импортировать SVG-файлы. Но что насчет наших CSS-файлов? Для стилей используется css-loader.
+<code>
+npm i css-loader -D
+</code>
+<code>
+module.exports = {
+  entry: './app/index.js',
+  module: {
+    rules: [
+      { test: /\.svg$/, use: 'svg-inline-loader' },
+      { test: /\.css$/, use: 'css-loader' }
+    ]
+  }
+}
+</code>
+Теперь мы можем импортировать как SVG, так и CSS-файлы. Однако для того, чтобы наши стили работали корректно, нужно добавить еще один лоадер. Благодаря css-loader мы можем импортировать CSS-файлы. Но это не означает, что они будут включены в DOM. Мы хотим не только импортировать такие файлы, но и поместить их в тег <style>, чтобы они применялись к элементам DOM. Для этого нужен style-loader.
+<code>
+npm i style-loader -D
+</code>
+<code>
+module.exports = {
+  entry: './app/index.js',
+  module: {
+    rules: [
+      { test: /\.svg$/, use: 'svg-inline-loader' },
+      { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }
+    ]
+  }
+}
+</code>
+Обратите внимание, что поскольку для обработки CSS-файлов используется два лоадера, значением свойства use является массив. Также обратите внимание на порядок следования лоадеров, сначала style-loader, затем css-loader. Это важно. Вебпак будет применять их в обратном порядке. Сначала он использует css-loader для импорта './styles.css', затем style-loader для внедрения стилей в DOM.
+Лоадеры могут использоваться не только для импорта файлов, но и для их преобразования. Самым популярным является преобразование JavaScript следующего поколения в современный JavaScript с помощью Babel. Для этого используется babel-loader.
+<code>
+npm i babel-loader -D
+</code>
+<code>
+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' }
+    ]
+  }
+}
+</code>
+Существуют лоадеры почти для любого типа файлов.
+==== Точка выхода ====
+Теперь вебпак знает о точке входа и лоадерах. Следующим шагом является указание директории для бандла. Для этого нужно добавить свойство output в настройки вебпака.
+<code>
+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'
+  }
+}
+</code>
+Весь процесс выглядит примерно так:
+  - Вебпак получает точку входа, находящуюся в ./app/index.js
+  - Он анализирует операторы import / require и создает граф зависимостей
+  - Вебпак начинает собирать бандл, преобразовывая код с помощью соответствующих лоадеров
+  - Он собирает бандл и помещает его в dist/index_bundle.js
+===== Ссылки =====
+Сылка на статью https://habr.com/ru/post/514838/