Webpack Your Workflow

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

Просто настроить быструю настройку, чтобы начать работу над своим проектом, стало настоящей головной болью.

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

Перед оптимизацией приложения следует оптимизировать рабочий процесс. Так что у вас будет больше времени на работу над приложением.

- Дэн Абрамов (создатель Redux)

Webpack

После быстрых поисков вспомнил друга. Это называется Webpack. Он делает то, что мне было нужно. Он решает проблему сборки и имеет достаточно мощности из коробки, что обычно не требует Grunt, Gulp или Browserify.

С помощью Webpack вы можете объявить простой файл конфигурации, чтобы определить процесс сборки. Если вы собираетесь напомнить мне о файле конфигурации Grunt, я бы сказал, что конфигурация не обязательно плохая вещь, если все сделано правильно!

So…

Насколько просто создать React SPA, который: закодирован в ES6, автоматически компилируется и автоматически обновляется при изменении файла?

Ну, это занимает всего 25 строк. Вот суть моего последнего проекта:

ps. Webpack 1.xx изначально не поддерживает и не понимает модули ES6, но это новая функция в Webpack 2.0.0. Это круто, не так ли? :)

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

Вы можете спросить; Что происходит с моим изображением и файлами CSS?

Что ж, вы можете импортировать эти активы прямо в свой компонент.

//import your CSS (or less, etc) for the component
import style from './style.css'
//import your images for the component
import img   from './img.png'

Webpack достаточно умен, чтобы динамически встраивать ваши CSS и изображения, когда это имеет смысл. Он будет учитывать размер файла. Если он небольшой, он будет встроен в таблицу стилей, а если он длинный, он уменьшит файл.

Это также работает для изображений с помощью подключаемого модуля url-loader. Если изображение достаточно маленькое, оно будет кодировать изображение в base64!

И это даже не самое лучшее;

Лучшая часть - это разделение кода

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

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

Хотите узнать больше? Прочтите webpack-howto Пита Ханта, прежде чем углубляться в webpack-docs.

И запомни;

Работай умом, а не силой!

Спасибо за прочтение.

Вы можете подписаться на меня в twitter @frontyend

Webpack Your Workflow