Differences

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

--- webpack [2021/08/20 14:30] – 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 70: / Line 69: @@
   - Преобразования, которые необходимо выполнить
   - Место, в которое следует поместить сформированный бандл
+===== Настройка =====
 ==== Точка входа ====
@@ Line 135: / Line 137: @@
 }
 </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/