Аннотация: Webpack — это круто, и вы должны его использовать.

Вы когда-нибудь открывали файл webpack.config.js и видели…

const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      {test: /\.(js|jsx)$/, use: 'babel-loader'}
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

… и спрашивал себя: «Какого черта?»

Круто, здесь же. Итак, давайте разберем эту страницу и разберемся с этим и с Webpack.

Webpack — это инструмент сборки, который хранит все ваши активы, такие как JavaScript, HTML, CSS, изображения, шрифты и многое другое, в одном месте и создает их как зависимости на графе зависимостей для вашего приложения.

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

Это имеет больше смысла, если мы понимаем проблемы, которые решает Webpack, поэтому давайте посмотрим на это:

Ну да ладно, хорошо. Что у нас здесь?

<script src="jquery.min.js"></script>  
<script src="jquery.somerandom.plugin.js"></script>  
<script src="main.js"></script>
<script src="whale.js"></script>
<script src="whale2.js"></script>
<script src="whale3.js"></script>

У нас есть зависимости, которые мы можем разместить в наших файлах JavaScript. Это хорошо работает, когда вы работаете над небольшим приложением. Однако по мере увеличения масштаба и добавления дополнительных зависимостей JavaScript производительность вашего приложения будет снижаться из-за избыточных HTTP-запросов.

Это нормально. Эти зависимости позже развиваются, объединяются и минимизируются на этапе сборки:

// build-script.js
var scripts = [  
    'jquery.min.js',
    'jquery.some.plugin.js',
    'main.js'
].concat().uglify().writeTo('bundle.js');

// Everything our app needs!
<script src="bundle.js"></script>

Это решает проблему производительности, но зависимости по-прежнему зависят от порядка объединенных файлов.

Итак, здесь на помощь приходит Webpack.

Прежде чем приступить к делу, вам нужно знать и понимать только четыре основных концепции:

Вход

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

module.exports = {
  entry: './path/to/entry/file.js'
};

С точки входа он выяснит, как все связано с помощью операторов require, import и т. д., значений url в вашем CSS, href в тегах изображений и т. д.

Вывод

Вывод — после того, как Webpack соберет все ваши зависимости вместе, свойство output указывает Webpack сохранить ваш связанный код в определенном файле.

const path = require('path');

module.exports = {
  entry: './path/to/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

Погрузчики

Загрузчики. Webpack распознает только файлы JavaScript, поэтому загрузчики преобразуют файлы в модули по мере их добавления в граф зависимостей. Думайте о них как о «задачах» в других инструментах сборки. Загрузчики отвечают за преобразование файлов в удобочитаемую форму. Например, Babel компилирует ECMAScript 6 в ECMAScript 5. Он позволяет вам использовать функции ES6 в ваших проектах, а затем компилирует ES5 для использования в производстве. В приведенной выше конфигурации определено свойство rules для одного модуля с двумя обязательными свойствами: test и use.

const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      {test: /\.(js|jsx)$/, use: 'babel-loader'}
    ]
  }
};

module.exports = config;

Плагины

Плагины — поскольку загрузчики выполняют преобразования только для каждого файла, plugins чаще всего используются (но не ограничиваются) для выполнения действий и пользовательских функций над компиляциями или фрагментами ваших связанных модулей. Система плагинов webpack мощная и настраиваемая.

Чтобы использовать плагин, вам нужен require() и добавьте его в массив плагинов. В приведенном ниже примере мы включили HtmlWebpackPlugin, который упрощает создание HTML-файлов для обслуживания ваших пакетов веб-пакетов.

var HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({
       title: title: "Webpack",
       filename: "./../index.html", 
       inject: true,
       template: './src/index.html',
       chunks: ["commons", "module"]
    })
  ]

Еще один полезный плагин — imaginmin. Этот плагин сжимает и оптимизирует ваши изображения, что может быть утомительным процессом сборки.

Бонус: хотите узнать разницу между загрузчиком и плагином? Этот человек лучше объясняет разницу.

Круто, теперь вы знаете 4 основных понятия, и вы мастер Webpack. А теперь вперед и собери связку!