Аннотация: 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. А теперь вперед и собери связку!