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

Давайте подумаем одну секунду

Как я уже сказал, webpack - это «сборщик». Компоновщики берут ресурсы и преобразуют их в формат, подходящий для использования браузером пользователя. Этот процесс объединения становится одной из самых важных проблем в веб-разработке, и, хорошо его решив, мы можем устранить большую часть боли из этого процесса.

Обычно люди сравнивают webpack с такими инструментами, как Grunt или Gulp. Но эти инструменты - исполнители задач. Буквально, средства выполнения задач упрощают выполнение таких задач, как анализ, сборка или разработка вашего проекта. По сравнению с упаковщиками у них более высокий уровень внимания и гораздо более конкретная цель.

Концепции

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

1. Вступление

Entry сообщает webpack, какие файлы являются точками входа в ваше приложение. Мы определяем это в webpack.config.js.

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

2. Вывод

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

В webpack.config.js

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

3. Погрузчики

Цель состоит в том, чтобы в вашем проекте были все ресурсы, поэтому проблема будет связана с веб-пакетом, а не с браузером. (это не означает, что все они должны быть объединены вместе) .
Webpack интерпретирует каждый файл (.css, .html, .scss, .jpg и т. д.) как модуль. Однако понимает только JavaScript. Загрузчики в webpack преобразуют эти файлы в модули по мере их добавления в ваш граф зависимостей.
На высоком уровне они имеют две цели в конфигурации вашего веб-пакета.

  • Определите, какие файлы следует преобразовать с помощью определенного загрузчика (свойство test).
  • Преобразуйте этот файл, чтобы его можно было добавить в ваш граф зависимостей - и, в конечном итоге, в ваш пакет -. (использовать свойство)

Снова в webpack.config.js:

var 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;

4. Плагины

Сам 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.

Если у Вас есть вопросы или сомнения, оставьте комментарий или свяжитесь с нами!

Чтобы узнать больше о нас и компании, ознакомьтесь с нашей брошюрой!

Удачи и проявите терпение!

Источники: Webpack official, Madewithlove и мой опыт.