Авторизация

Средний

14 уроков

Курс

Webpack 2

Webpack 2 — один из самых мощных и гибких инструментов для frontend-сборки. В чем его преимущества, какие проблемы он решает и как с ним работать — в практическом видеокурсе от основателя LoftSchool&LoftBlog Дмитрия Ковальчука.

#2 — Установка Webpack, начало работы

Мая

2017

Автор урока:

Дмитрий Ковальчук

комментариев

лайка

Всем привет! Меня зовут Ковальчук Дмитрий. Вы смотрите Лофтскул. Мы продолжаем изучать Webpack и сейчас мы с вами вместе, шаг за шагом, создадим наше первое веб-приложение.

1. Подготовка проекта

Создадим новую директорию для нашего приложения.

mkdir webpack-app
cd webpack-app

1 2	mkdir webpack-app cd webpack-app

При помощи пакетного менеджера Yarn создадим package.json файл для управления зависимостями проекта.

yarn init -y

1	yarn init -y

Инициализируем git-репозиторий и настроим файл .gitignore

git init
touch .gitignore

1 2	git init touch .gitignore

В список исключений мы добавим две директории: папку с зависимостями проекта и скрытую папку с рабочими файлами phpstorm.

node_modules
.idea

1 2	node_modules .idea

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

git add .
git commit -m "my first commit"

1 2	git add . git commit -m "my first commit"

2. Установка Webpack

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

yarn add webpack -D

1	yarn add webpack -D

Проверим, добавился ли вебпак в «devDependencies»

cat package.json

1	cat package.json

Отлично. Давайте теперь создадим файл конфигурации для Webpack. Все необходимые инструкции мы будем писать именно в нём.

touch webpack.config.js

1	touch webpack.config.js

3. Запуск Webpack при помощи npm-скриптов

Запускать Webpack мы будем при помощи так называемых npm-скриптов — это стандартная рекомендованная практика. При чём в нашем случае мы вместо npm будет пользоваться Yarn. Надеюсь, вы уже освоили этот пакетный менеджер. Если нет — посмотрите соответствующее видео на лофтскул.

{
  "scripts": {
    "start": "webpack"
  },
  "devDependencies": {
    "webpack": "^2.2.1"
  }
}

{

"scripts": {

"start": "webpack"

"devDependencies": {

"webpack": "^2.2.1"

}

Npm-скрипты работают очень просто. В блоке scripts файла package.json мы пишем в формате «ключ» — «значение» слева — название скрипта (оно может быть любое, на наш вкус), а справа то, что должно быть запущено.

Для запуска скрипта используется команда «run»

yarn run start

1	yarn run start

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

4. Создание первых javascript-модулей

Создадим папку «source» и в ней 2 javascript-файла «index.js» и «menu.js».

mkdir source
touch source/{index.js,menu.js}

1 2	mkdir source touch source/{index.js,menu.js}

В файл menu.js мы поместим функцию, которая будет создавать список пунктов меню. Эта функция принимает 2 параметра: первый — массив пунктов меню, второй — класс, который нужно присвоить тегу ˂ul˃. После вызова данная функция будет возвращать html-элемент, а именно ненумерованный список, правда, без ссылок. Вы можете усовершенствовать эту функцию самостоятельно, однако в наших целях простого списка будет вполне достаточно.

export default function (array, className) {
    var menu = document.createElement("ul");
    menu.className = className;
    var listItems = '';
    array.forEach(function(item) {
        listItems += '<li>' + item + '</li>';
    });
    menu.innerHTML = listItems;
    return menu;
}

export default function (array, className) {

var menu = document.createElement("ul");

menu.className = className;

var listItems = '';

array.forEach(function(item) {

listItems += '<li>' + item + '</li>';

});

menu.innerHTML = listItems;

return menu;

}

Кстати, перед нами самый настоящий ES6-модуль — изолированный и аккуратный код, который можно использовать из проекта в проект, если будет необходимо. Необходимо отметить, что поддержка ES6-модулей появилась в Webpack начиная со второй версии, т.е. нам нет необходимости подключать babel в данном случае. Всё и так будет работать.

Ключевое слово export, стоящее перед объявлением функции, экспортирует данную функцию в остальную часть приложения. Ключевое слово default говорит о том, что мы экспортируем только одно значение, по умолчанию.
Если это пока для вас сложно, не волнуйтесь. Вы достаточно быстро привыкнете.

Следующий модуль index.js. В него мы импортируем функцию переданную во вне по умолчанию из menu.js и сразу присваиваем ей имя “createMenu”. При этом мы можем не указывать “.js” — webpack и так поймёт, что мы имеем ввиду.

Давайте создадим меню, состоящее из 3х пунктов …. Для удобства стилизации присвоим меню класс «menu».

import createMenu from './menu';
var menu = createMenu(['Главная','Обо мне','Портфолио'], 'menu');
document.body.appendChild(menu);

import createMenu from './menu';

var menu = createMenu(['Главная','Обо мне','Портфолио'], 'menu');

document.body.appendChild(menu);

5. Создаём html-файлы при помощи html-webpack-plugin

Для создания html-файлов и работы с шаблонами мы будем использовать плагин html-webpack-plugin.
Установим плагин при помощи Yarn. Не забудем флаг -D, чтобы зависимость была сохранена в devDependencies файла-манифеста. Туда же, где сохранён вебпак.

yarn add html-webpack-plugin -D

1	yarn add html-webpack-plugin -D

В webpack.config.js мы поместим следующий код. Я сэкономлю ваше время, сейчас и далее я не буду тратить время на тайпинг. Вместо этого постараюсь объяснить уже набранный код.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const PATHS = {
    source: path.join(__dirname, 'source'),
    build: path.join(__dirname, 'build')
};

module.exports = {
    entry: PATHS.source + '/index.js',
    output: {
        path: PATHS.build,
        filename: '[name].js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Webpack app'
        })
    ]
};

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

const PATHS = {

source: path.join(__dirname, 'source'),

build: path.join(__dirname, 'build')

};

module.exports = {

entry: PATHS.source + '/index.js',

output: {

path: PATHS.build,

filename: '[name].js'

plugins: [

new HtmlWebpackPlugin({

title: 'Webpack app'

})

]

};

Пояснения:

— “сonst” — это ES6-альтернатива для “var”, указывающая, что переменная не должна быть изменена. Node.js полностью поддерживает эту часть ES6, т.е. в данном случае я также могу обойтись без babel.

— “path” — это базовый модуль node.js, который поможет нашему приложению работать корректно (одинаково) на разных платформах (например, windows или linux), т.к. они по разному определяют пути к файлам.

— “PATH” — объект, в который мы поместили 2 свойства: “source” — исходники приложения и “build” — папка, в которую будут помещаться результаты работы Webpack.

— “module.exports” — экспорт модуля в node.js. Внутри него мы пишем такие настройки Webpack, как entry, output, plugins и пр.

— “entry” — точка входа нашего приложения. Для многостраничного сайта можно сделать отдельные точки входа для каждой страницы. Запомните, что точками входа могут являться только те модули, которые не используются другими модулями вашего приложения. Так, например, наш модуль index.js использует другой модуль — menu.js. Но сам index.js не используется больше никаким модулем.

— “output” — описывает имена файлов и директорию — результат работы Webpack.

— “[name]” — это плейсхолдер, в него автоматически будут подставляться имена точек входа “entry” нашего приложения. А у нас их будет несколько. Но об этом позже.

— “plugins” — в этом разделе перечисляются плагины, которые кастомизируют процесс сборки Webpack. В нашем случае, это всего один плагин, который создает HTML-файл с заданным тайтлом.

6. Запуск приложения

Запустим Webpack и посмотрим на результат.

yarn run start

1	yarn run start

В консоли мы можем видеть много полезной информации, в том числе:

— время сборки,
— плагины,
— сгенерированные файлы и пр.

Результатом сборки стали 2 файла: main.js и index.html. Файл main.js содержит код обоих модулей: index.js и menu.js, а также рабочий код Webpack.

На этом завершится наш второй урок по изучению Webpack

Приятного всем просмотра! Учитесь с удовольствием!

ツПолезные ссылки к видеоуроку:
✔ Исходники на GitHub
✔ Видеоурок по Yarn
✔ Получить профессию «Веб-разработчик»
✔ Прокачаться на «Продвинутом курсе по веб-разработке»
✔ Подписывайтесь на канал, новые видео выходят каждую неделю.

Webpack вебпак Видеокурс Видеоурок установка webpack

Материалы к уроку:

Делись:

Оставь комментарий!

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

Для отправки комментария вам необходимо авторизоваться.