Изучите Webpack за 15 минут

Изучите Webpack за 15 минут

От автора: инструменты сборки стали неотъемлемой частью веб-разработки в основном из-за сложности JS-приложений. Сборщики позволяют запаковывать, компилировать и организовывать множество файлов и библиотек, необходимых в современных веб-проектах. В этом уроке мы расскажем вам про webpack, мощный open-source сборщик и препроцессор, умеющий выполнять большое количество разных задач. Мы научим вас писать модули, собирать код, а также использовать некоторые плагины загрузки. Урок написан для людей, абсолютно не знакомых с webpack. Однако рекомендуется иметь малейшие знания JS.

Изучите Webpack за 15 минут

Почему именно webpack?

Как и в любом другом аспекте веб-разработки, здесь нет стандарта, какой инструмент сборки использовать. В настоящее время у разработчиков есть выбор между webpack, Gulp, Browserify, NPM scripts, Grunt и еще 10 инструментами. В сети есть много подробных сравнений, однако все инструменты очень похожи. В большинстве случаев выбор зависит от личных предпочтений и проекта, над которым вы сейчас работаете.

Ниже приведены плюсы и минусы, чтобы вы могли решить, подходит ли вам webpack или нет:

Плюсы:

отлично подходит для работы с одностраничными приложениями;

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

принимает модульный синтаксис require() и import;

позволяет продвинуто разбивать код;

горячая перезагрузка для более быстрой разработки с React, Vue.js и похожими фреймворками;

по данным JS-опроса за 2016 это самый популярный запаковщик.

Минусы:

не подходит новичкам в веб-разработке;

сначала принцип работы с CSS-файлами, изображениями и другими не JS ресурсами кажется запутанным;

документация могла быть и лучше;

часто изменяется, большая часть уроков за 2016 уже устарела.

Установка

Проще всего установить webpack через пакетный менеджер. Мы будем использовать npm, но вы можете взять Yarn или другой менеджер. В обоих случаях вам понадобится Node.js и готовый package.json.

Рекомендуется ставить webpack локально (без флага –g), чтобы у всех, кто работает с вашим проектом, была одна версия

npm install webpack --save-dev

После установки лучше всего запустить webpack через скрипт Node.js. Добавьте эти строки в package.json:

//...
 "scripts": {
 "build": "webpack -p",
 "watch": "webpack --watch"
 },
//...

Теперь если в терминале выполнить команду npm run build, webpack соберет наши файлы (флаг –p означает продакшн, собранный код минифицируется). Команда npm run watch запустит процесс автоматической сборки файлов при внесении в них любых изменений.

Осталось сказать webpack, какие файлы собирать. Рекомендуется делать это через конфиг.

Конфиг файл webpack

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

Создайте в корневой папке проекта файл webpack.config.js.

var path = require('path');

module.exports = {
  entry: './assets/js/index.js',
  output: {
 filename: 'bundle.js',
 path: path.resolve(__dirname, 'dist')
  }
};

Опция entry – наш главный JS-файл. Существует множество разных стратегий настройки точки входа, но в большинстве случаев единой точки будет достаточно.

Опция output задает имя и путь к нашей сборке. После запуска webpack весь JS-код запакуется в файл bundle.js. В HTML мы будем подключать только этот файл:

<script src="./dist/bundle.js"></script>

Такой настройки должно хватить для начала. Позже мы добавим кое-что, но сначала давайте посмотрим, как работают модули.

Модули webpack

Существует множество способов работы с модулями в webpack, и в большинстве случаев вы можете выбирать любой. В этом уроке мы будем использовать синтаксис ES6 import.

Необходимо добавить модуль приветствия для наших пользователей. Для этого необходимо создать файл greeter.js и экспортировать простую функцию (greeter.js):

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
function greet() {
 console.log('Have a great day!');
};

export default greet;

Чтобы использовать этот модуль, его необходимо импортировать и вызвать в нашей точке входа. Если взгляните чуть выше, то вспомните, что наша точка входа это index.js.

import greet from './greeter.js';

console.log("I'm the entry point");
greet();

Если теперь запустить сборку с помощью npm run build и открыть HTML в браузере, то мы увидим:

Изучите Webpack за 15 минут

Наша точка входа и модуль приветствия были скомпилированы в один файл bundle.js, который выполнился в браузере. Простая блок-схема действий:

Изучите Webpack за 15 минут

Подключение библиотек

Нам нужно, чтобы наше приложение в приветствии писало день недели. Для этого нам понадобится moment.js, его необходимо напрямую импортировать в модуль приветствия.

Сперва необходимо установить библиотеку через npm:

npm install moment --save

Далее в модуле приветствия мы просто импортируем библиотеку точно так же, как мы делали с локальными модулями в предыдущем шаге (greeter.js):

import moment from 'moment';

function greet() {
 var day = moment().format('dddd');
 console.log('Have a great ' + day + '!');
};

export default greet;

После повторной сборки в консоли браузера мы увидим следующее сообщение:

Изучите Webpack за 15 минут

Диаграмма теперь выглядит следующим образом:

Изучите Webpack за 15 минут

Заметка: существуют более продвинутые техники подключения библиотек, но они выходят за рамки нашей статьи. Читайте более подробно по ссылке.

Загрузчики

С помощью загрузчиков webpack выполняет задачи во время сборки и делает пре/постпроцессинг файлов. Например, загрузчики могут компилировать TypeScript, загружать компоненты Vue.js, рендерить шаблоны и многое другое. Большая часть загрузчиков написана сообществом разработчиков, список популярных можно посмотреть по ссылке.

Скажем, нам нужно добавить линтер в наш проект для проверки JS-кода на ошибки. Для этого можно подключить JSHint loader, который будет ловить все плохие практики и код с ошибками.

Сперва необходимо установить JSHint и webpack JSHint loader:

npm install jshint jshint-loader --save-dev

Далее необходимо добавить пару строк в конфиг файл webpack, чтобы инициализировать загрузчик и передать тип файлов на проверку, а также тип файлов, который нужно игнорировать (webpack.config.js).

var path = require('path');

module.exports = {
  entry: './assets/js/index.js',
  output: {
 filename: 'bundle.js',
 path: path.resolve(__dirname, 'dist')
  },
  // Добавляем JSHint loader
  module: {
 rules: [{
 test: /\.js$/, // запускаем loader на всех файлах .js 
 exclude: /node_modules/, // игнорируем все файлы из папки node_modules
 use: 'jshint-loader'
 }]
  }
};

Теперь при запуске webpack в терминале отобразятся предупреждения (которые мы игнорируем):

Изучите Webpack за 15 минут

Файл moment.js находится в папке node_modules, и он не будет линтиться загрузчиком JSHint:

Изучите Webpack за 15 минут

На этом завершается наше знакомство с webpack! Так как этот урок написан для новичков, мы старались покрыть только самые полезные и известные концепции webpack. Надеемся, этот урок был полезен, не слишком запутанным, а также, что мы уложились в отведенные 15 минут. В будущем мы планируем написать вторую часть урока, в которой объясним, как работать с CSS-модулями и другими более продвинутыми функциями.

Автор: Danny Markov

Источник: http://tutorialzine.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по Webpack. Основы

Прямо сейчас посмотрите курс по Webpack!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree