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

В любом случае, что это за хрень за proxyTable? Почему нам нужно столько мусора только для того, чтобы скомпилировать наш материал? Не волнуйтесь, начнем с самого начала.

Это руководство предназначено для людей, которые, возможно, использовали Webpack раньше, слышали о нем или просто интересуются «новыми» острыми веб-технологиями. Без лишних слов, приступим!

«Стабилизация полей искривления - активация путешествия во времени в далекое прошлое»

Webpack - это еще один развивающийся шаг в экосистеме инструментов. Сначала был Грунт. Компиляция SCSS в CSS выглядела так:

Многословно, но делает свое дело. Была одной из первых систем сборки интерфейсов для инструментов. Спасибо команде Grunt!

Внезапно Grunt уронил мяч, а Gulp поднял его благодаря более простой настройке.

Gulp великолепен своей простотой. Без сомнения, это хороший выбор для более простых проектов. Спасибо команде Gulp!

Но если у вас есть более крупный и ресурсоемкий проект, webpack определенно вам подходит. Например, нам нужно скомпилировать Javascript, SCSS, требовать / импортировать файлы, выполнить горячую перезагрузку без изменения текущего состояния, объединить производственные сборки и т. Д.

Webpack здесь, чтобы спасти положение .

Полное сравнение здесь

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

Ладно, как бы то ни было, я сделаю это.

Большой!

Для Webpack нам понадобятся следующие вещи:

Базовые знания Nodejs
NPM
Базовые знания терминала
Текстовый редактор. (Подойдет любой)
* nix тип операционной системы (Mac или Linux)

1) Перейдите на https://nodejs.org/en/, скачайте последнюю версию и установите ее. Это довольно простой установщик с графическим интерфейсом, вы можете это сделать!

После установки перейдите к своему терминалу и введите:

node -v

Поздравляем, у вас установлен Nodejs! Разве не все было так просто?

NPM поставляется с Nodejs. NPM означает Диспетчер пакетов узла. NPM в основном позволяет вам использовать существующий код, написанный для вас людьми!

P.S Если у вас Mac и у вас установлен homebrew, вы можете установить узел с помощью этой команды brew install node

2. Теперь готовим. У нас установлены Nodejs и NPM, и мы готовы к простой настройке Webpack.

Начнем с создания нового проекта. Вы можете называть его как хотите.

Хорошо. Итак, мы сделали свой проект. Что дальше? Перейдите к проекту и давайте инициализируем (модное слово для начала) новый проект Nodejs.

Так что это? Первым делом мы перешли в папку / каталог проекта. После этого мы запустили проект Nodejs. Это основной файл конфигурации.

ls - list directory contents

Если вам интересно, узнайте больше о package.json - а вам стоит, не стесняйтесь!

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

Отлично, мы добиваемся прогресса.

Нам также понадобятся наши файлы index.html, webpack.conf.j и index.js. Так что давайте их сделаем!

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

3) Хорошо! Готовый? Начнем с установки зависимостей для Webpack.

Устанавливаем Webpack и сервер разработки Webpack. Нам нужен HTTP-клиент для обслуживания наших файлов, поэтому мы устанавливаем dev-сервер.

После завершения установки загляните в node_modules

Не пугайтесь! Возможно, нам никогда не придется трогать ни один из этих файлов. Кстати, мы называем эти зависимости. Это те файлы, которые нужны Webpack.

Как видим, зависимости мы успешно установили. Думайте о package.json как о привратнике ко всем зависимостям, которые нужны нашему проекту Nodejs. package.json Здесь будут храниться все зависимости.

4) Конфигурация для самого Webpack

Хорошо, у нас есть все необходимое. Теперь пора выяснения отношений.

Откройте webpack.config.js и начните с запроса webpack. Нам нужно каким-то образом сказать Webpack, что у него есть все, что ему нужно.

Мы используем модули CommonJS для запроса файлов. Http://requirejs.org/docs/node.html Подробнее здесь, не волнуйтесь, нам больше не нужны зависимости. У Nodejs есть Commonjs из коробки.

Как webpack узнает, какой файл читать? Это отличный вопрос. Он не делает! Нам нужно определить отправную точку. Да, и, кстати, нам нужно иметь возможность «выплевывать» вывод и для браузера. Базовый рабочий процесс выглядит так: мы пишем код, webpack читает его, компилирует, выдает скомпилированную версию для браузера.

Это не так уж сложно, правда? Это просто!

Что теперь? Ну .. как внешний мир (за пределами этого файла) знает об этом файле? Нам нужно экспортировать его во внешний мир. (позвольте остальному миру прочитать это).

Итак, мы идем! У нас есть самый простой файл webpack.

Ладно, круто, как его активировать?

Что ж, нам нужно сделать три быстрых изменения.

В каждом веб-файле есть хотя бы один файл .html. Здесь браузер начинает работать с нами. Что нам нужно сделать, так это указать наш вывод Webpack на индексный файл. Мы можем включить его с помощью простого <script></script>

Хорошо, круто. Теперь нам нужно установить веб-пакет глобально для ручного тестирования. Если вы не очень хорошо знакомы с экосистемой Node, не волнуйтесь.

Но мы только что установили webpack, не так ли ?? Что ты имеешь в виду, нам нужно установить его заново. На этот раз все по-другому. На этот раз нам нужно установить его глобально. Глобально? Ты имеешь в виду, как будто мои друзья это видят? Ну да и нет. Ваш персональный компьютер имеет доступ к нему вне проекта Nodejs. Непонятно, знаю.

"Хорошо, сколько еще?"

Не очень много! Мы можем начать писать наш код! Смотреть! Откройте свой index.jsfile и напишите что-нибудь.

Вы готовы? Запустим наш Webpack!

Ой ... что это? О, это в основном журнал отчетов о том, что сделал Webpack. Webpack похож на этого верного дворецкого, который рассказывает вам все, что он для вас сделал.

Теперь давайте откроем наш index.html и посмотрим на результат!

Отличная работа! Вы только что создали свой первый проект Webpack. В следующей главе мы расскажем, как использовать все основные функции, такие как отслеживание изменений файлов, компиляция SCSS в CSS, горячая перезагрузка. В статье буквально закончилось место.

Следующая глава здесь!

"Исходный код"

Ты сделал это!

Продолжайте бороться и учиться, спасибо за чтение!