В первой статье этой серии мы рассмотрели базовую конфигурацию веб-пакета, в которой мы мало что делали, а только обслуживали файлы в нашем проекте.
Что ты думаешь? Не слишком сложно, правда?
А теперь пора добавить еще две концепции. Эти концепции действительно важны в 2017 году, поскольку все мы хотим написать наш javascript с новым синтаксисом ES6, весь наш CSS с блестящими новыми спецификациями и иметь как можно больше причудливого кода.
Все это возможно с помощью загрузчиков и плагинов.
Идея может показаться немного странной, но как только мы их рассмотрим, она больше не будет сложной. Я new Promise().
Погрузчики
Они определяют, как будет выглядеть ваш код. С помощью загрузчиков вы можете изменить любую часть вашего кода. Вы можете просто указать любое расширение файла, чтобы внести изменения.
Например:
Допустим, мы создаем новый проект и не хотим писать весь код с новым синтаксисом ES6, потому что так мы должны писать в 2017 году. Правильно? Но есть небольшая проблема. Не все браузеры поддерживают все новые функции синтаксиса ES6, и мы хотим, чтобы они работали со всеми из них.
Что ж, лучший способ сделать это на данный момент - использовать транспилятор. В этом примере мы будем использовать babel ⚡.
Babel выполнит ваш код и перенесет все в ES3 / 4/5, который поддерживает каждый браузер.
Давай настроим!
Во-первых, нам нужно установить babel-core, который вам нужен для использования babel, babel-loader, который будет выполнять модификацию кода и babel- preset-es2015, который выберет для вашего кода все стабильные функции ES6.
$ npm install babel-core babel-loader babel-preset-es2015 --save-dev
Кроме того, нам нужен файл .babelrc в корне вашего проекта, который выглядит следующим образом:
{
"presets": [
"es2015"
]
}
Поэтому, когда babel запускается в любой среде, он выбирает этот файл и использует этот пресет.
Затем вы можете перейти к своей конфигурации и добавить следующие строки:
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader'
}
]
}
Если вы привыкли к webpack 1.x, вы можете изменить ключевое слово rules, чтобы вместо него использовать загрузчики, и удалить
-loaderиз каждого загрузчика.
Кроме того, вы можете проверить здесь больше различий между webpack 1.x и 2.x.
Мы можем запустить наш prod-скрипт, чтобы посмотреть, что получится.
$ npm run prod > [email protected] prod /Users/aanglada/Projects/easy-webpack-config > webpack --env.production Hash: d2ab8a6ef22962d9eba2 Version: webpack 2.3.2 Time: 794ms Asset Size Chunks Chunk Names main.bundle.js 2.98 kB 0 [emitted] main [0] ./index.js 284 bytes {0} [built]
Хорошо! Теперь мы можем пойти и проверить, выглядит ли наш пакет как код, который понимает браузер. Это сделали?
Если вам нужно использовать более одного загрузчика в одном правиле, это очень просто, просто сделайте следующее:
module: {
rules: [
{
test: /\.js$/,
use: ['babel-loader', 'whatever-loader']
}
]
}
Замените запись loaders на use, и в этом случае все будет массивом загрузчиков, которые будут применяться последовательно.
Другой вариант использования - написание coffeescript или typescript, поэтому вы кодируете любой из них, но окончательный результат будет тем, с чем все браузеры знают, как работать, javascript! 🎉🎉
Скажу тебе что? Есть загрузчики для всего, я обычно ищу их, набирая «[всякий раз, когда мне нужно использовать] -loader» в Google, и я всегда нахожу то, что хочу 😂 (забавно, но это правда).
Погрузчики ушли! 🤜 Давайте посмотрим на плагины.
Плагины
Итак, мы подошли к самому интересному: плагины - это, по сути, сам веб-пакет. Весь webpack - это плагин, поведение которого можно изменить самостоятельно, просто добавив новый плагин в раздел plugins. Интересно, правда?
Что это означает? Webpack - это плагин с поведением по умолчанию, объединяющим ресурсы. Добавление плагина в вашу конфигурацию последовательно добавит еще один шаг в очередь задач, которые Webpack должен выполнить перед тем, как отдать ваши файлы.
Он имеет несколько встроенных плагинов, большинство из которых для оптимизации вашего кода, перейдите сюда, чтобы увидеть их все.
Обратите внимание, это документация по webpack 1.x, поэтому, если вы используете webpack 2.x, стоит проверить, поддерживается ли плагин по-прежнему.
Чаще всего добавляется сворачивание наших файлов. Мы все хотим иметь как можно меньше файлов javascript, чтобы обеспечить максимальное время написания сценариев и, по сути, самую быструю загрузку страницы. Итак, давайте добавим это поведение в конфигурацию нашего веб-пакета.
plugins: [
new webpack.optimize.UglifyJsPlugin({
minimize: true,
sourceMap: true,
compress: {
warnings: false
}
})
]
Снова запускаем наш prod-скрипт и…! Бум 💥
$ npm run prod > [email protected] prod /Users/aanglada/Projects/easy-webpack-config > webpack --env.production Hash: d2ab8a6ef22962d9eba2 Version: webpack 2.3.2 Time: 455ms Asset Size Chunks Chunk Names main.bundle.js 716 bytes 0 [emitted] main [0] ./index.js 284 bytes {0} [built]
Теперь наш код должен быть минимизирован и готов к использованию в продакшене.
Вывод
Загрузчики и плагины добавляют поведение в конфигурацию нашего веб-пакета, делая его более гибким и мощным.
Не стесняйтесь проверить репо, весь код из этой статьи будет в ветке под названием loaders-and-plugins.
Также сделал несколько репозиториев, которые помогут вам начать процесс разработки через 1… 2… 3…
Что происходит
Это серия статей, которые помогут вам более легко настроить webpack, поэтому я покажу вам все, что вы хотите о нем знать.
- Псевдонимы
- Представление
- Разделение кода
- Дерево трясется
Вы также можете сказать мне, что вы хотите прочитать дальше.
Следуйте за мной в твиттере и на носителе, чтобы получать больше обновлений веб-пакетов и внешнего интерфейса:
✍️👨🚀 Алехандро Гарсия Англада
Спасибо за чтение! 👏
