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 и мой опыт.