Webpack, в своей самой простой форме, представляет собой упаковщик модулей для современных приложений JavaScript. Когда Webpack запускается в проекте, он создает граф зависимостей, который принимает все типы модулей, которые могут понадобиться проекту, и в результате обработки этого графа он создает пакет приложения в качестве вывода.

Хотя современные библиотеки javascript сами создают модули веб-пакетов и пакетов, это очень полезно знать.

По сути;

По умолчанию Webpack поддерживает следующие типы модулей:

  • Модули ECMAScript
  • Модули CommonJS
  • модули AMD
  • Активы (шрифт, значок и т. д.)
  • Модули WebAssembly

В дополнение к этим модулям Webpack также поддерживает языки, отличные от JavaScript, и препроцессоры, такие как babel, через загрузчики. Загрузчики указывают, как обрабатывать другие модули, недоступные по умолчанию в веб-пакете, и как в конечном итоге включить их в приложение.

Сообщество Webpack создало загрузчики для множества разных языков и языковых обработчиков.

Если привести пример таких загрузчиков:

  • КофеСкрипт
  • Машинопись
  • ESNext (Вавилон)
  • Сасс
  • Меньше
  • Стилус
  • Вяз
    …и т.д.

Таким образом, Webpack предоставляет мощный и многофункциональный API, позволяющий независимо разрабатывать приложения в любом стеке.

Основные понятия Webpack

  • Вход
  • Выход
  • Погрузчики
  • Плагины
  • Режим (Prod, Dev)
  • Совместимость с браузером

Ввод
Благодаря функции ввода Webpack получает информацию о том, с чего начать граф зависимостей проекта.

Свойство записи, значение по умолчанию которого равно ./src/index.js, также можно изменить следующим образом:

// webpack.config.js
module.exports = {
  entry: './[YOUR_ENTRY_FILE_PATH].js'
};

Вывод

С помощью свойства output указывается, куда будет помещен пакет-пакет, созданный в результате обработки проекта Webpack, и как будет называться пакет.

Путь по умолчанию: ./dist/main.js

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './[YOUR_ENTRY_FILE_PATH].js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'example-webpack.bundle.js'
  }
};

Благодаря функции path указывается каталог, в который будут переброшены созданные файлы, а filename — это имя файла. Модуль пути, полученный с помощью функции require() выше, является одним из основных модулей Node.js и используется для установки путей к файлам.

Погрузчики

По умолчанию Webpack может обрабатывать только файлы JavaScript и JSON. Благодаря загрузчикам другие типы файлов, включенные в зависимости проекта, также могут быть обработаны и преобразованы в модули, понятные браузеру.

Загрузчики в своей простейшей форме включают в себя две функции:

  • Свойство test получает выражение в виде регулярного выражения. Таким образом, все файлы, включенные в это регулярное выражение, обрабатываются соответствующим загрузчиком.
  • Свойство use указывает, какой загрузчик будет преобразовывать эти файлы. Пример использования загрузчика выглядит следующим образом:
// webpack.config.js
const path = require('path');

module.exports = {
  output: {
    filename: 'example-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

С помощью свойства rules в файле конфигурации выше для модуля определены два свойства с именами test и use. Благодаря этой конфигурации Webpack преобразует файлы txt, включенные в оператор import/require, в проект с помощью raw-loader и добавляет их в комплект. >.

Плагины

В то время как загрузчики помогают использовать различные типы модулей, плагины; Он играет роль во многих задачах, таких как оптимизация пакетов, управление активами и внедрение переменных среды, таких как PROD/DEV, в код. Чтобы плагин можно было использовать, он должен быть включен в конфиг функцией require() и добавлен в массив плагинов. У них также есть свои специальные параметры для настройки плагинов. Поскольку плагин можно использовать более чем в одном месте файла конфигурации для разных целей, его необходимо использовать, создав экземпляр с оператором new. Простое использование плагина выглядит следующим образом:

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js'
  },
  plugins: [new HtmlWebpackPlugin({template: './src/index.html'})]
};

Благодаря html-webpack-plugin, используемому в этом примере, все пакеты, созданные webpack, будут внедрены в него путем создания нового файла index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack Demo App</title>
  </head>
  <body>
    <script src="index_bundle.js"></script>
  </body>
</html>

Режим

Параметр режима, используемый для активации оптимизаций, которые Webpack применяет по умолчанию; Он может быть установлен на производство, разработку или ничего.

Значение по умолчанию — производство.

// webpack.config.js
module.exports = {
  mode: 'production'
};

Совместимость браузера

Webpack поддерживает все браузеры, совместимые с ES5 (без поддержки IE8 и ниже). Это связано с тем, что Webpack нуждается в Promise для операторов импорта. Прежде чем использовать оператор import, необходимо загрузить полифилл для поддержки старых браузеров.

документация веб-пакета: https://webpack.js.org/concepts/

Спасибо за прочтение, по мере сил старался поделиться своими знаниями, надеюсь, было полезно.

В следующем посте я расскажу об установке и использовании веб-пакета. :)