Часть 2: Начало работы
Прежде всего:
Это часть 2 из серии Webpack ›= v4. Полное руководство. Если вы еще не проверяли часть 1, сделайте это в первую очередь.
Перед погружением:
В этой серии статей я собираюсь познакомить вас с webpack4, пытаясь понять и освоить его функции и инструменты на различных примерах.
Шаг 1: установка
Предпосылка:
Убедитесь, что у вас установлена последняя стабильная версия Node.js. Было бы лучше использовать версию Node.js LTS (долгосрочная поддержка) в качестве отправной точки.
На данный момент моя текущая установленная версия Node.js - (v8. 12.0).
Пожалуйста, запустите эту команду, чтобы проверить свою:
node -v
Ой, подожди! Мы хотим практиковать webpack, а не Node.js, верно ?! Так зачем нам вообще говорить о Node.js?
На самом деле webpack - это просто приложение Node.js. Итак, нам нужен Node.js для его запуска.
Теперь, когда у вас установлен Node.js, давайте создадим каталог с именем «webpack4-demo» и введем его:
mkdir webpack4-demo cd webpack4-demo
Затем настройте новый пакет npm:
npm init -y
-y создаст «webpack4-demo / package.json» со значениями по умолчанию, не запрашивая их переопределения.
Создайте файл «.gitignore».
Игнорировать node_modules
Теперь мы собираемся установить [email protected] локально в зависимости от разработчика.
Поскольку [email protected] является текущей версией на момент написания, я собираюсь установить его без указания версии, как показано ниже:
npx yarn add webpack -D
В противном случае вы можете указать версию следующим образом:
npx yarn add [email protected] -D
Пожалуйста, учитывайте эту спецификацию версии пакета при установке через всю эту часть.
Как сказано в документации по webpack; если вы используете webpack v4 или новее, вам необходимо установить webpack-cli.
webpack-cli - это инструмент, используемый для запуска webpack из командной строки.
Итак, мы собираемся установить [email protected] локально:
npx yarn add webpack-cli -D
Примечания:
- Вы можете использовать любой менеджер пакетов, который отвечает вашим потребностям.
- npx - это средство запуска пакетов npm, которое поставляется с версиями [email protected] и [email protected] или более поздними. npx здесь установит Yarn, если он еще не установлен на машине, затем установит пакеты с помощью Yarn и завершит удаление Yarn с машины (если она была установлена npx).
Шаг 2: базовая настройка
На этом этапе мы собираемся написать исходный код.
Создадим:
каталог с именем: «webpack4-demo / src»
файл с именем: «webpack4-demo / src / index.js»
Этот каталог «webpack4-demo / src» будет содержать весь исходный код, который мы собираемся написать, и будет объединен с использованием webpack.
В нашем примере будет использоваться библиотека lodash, поэтому давайте установим ее локально в качестве зависимости:
npx yarn add lodash
Теперь давайте запишем этот код в файл «webpack4-demo / src / index.js».
Шаг 3: создание пакета
На этом этапе мы собираемся сгенерировать пакет.
Сначала создадим:
каталог с именем: «webpack4-demo / dist»
Этот каталог «webpack4-demo / dist» будет содержать пакет, который будет сгенерирован webpack, обозначим его «webpack4-demo / dist / main.js ».
Чтобы использовать сгенерированный пакет «webpack4-demo / dist / main.js» и загрузить его в браузер, я собираюсь создать вручную (позже это webpack кто сделает это автоматически, настроив подключение - просто проявите терпение! -) HTML-файл с именем «webpack4-demo / dist / index.html» и вызовите «webpack4-demo / dist / main.js» в теге скрипта, как показано ниже:
Не забудьте, пожалуйста, git игнорировать «webpack4-demo / dist / main.js», но не делайте этого для «webpack4-demo / dist. /index.html », поскольку он еще не создается автоматически веб-пакетом.
Теперь вы можете создать свой первый пакет с помощью webpack. Для этого вы должны выполнить эту команду:
npx webpack
Поздравления = D
Примечание. Здесь npx использует двоичный файл пакета webpack, который мы уже установили на шаге 1.
Я полагаю, что у вас все идет хорошо, и вы получаете пакет с именем «webpack4-demo / dist / main.js».
Примечание. webpack4-demo / dist / main.js является свернутым и оптимизированным выводит файл JavaScript, сгенерированный webpack с использованием его внутреннего графа зависимостей, как описано в части 1 этой серии.
Ключевые слова, заслуживающие отдельного объяснения:
- Минимизировано, что означает, что все пробелы будут удалены, а все имена переменных, функций и классов будут минимизированы.
- Оптимизирован во многих смыслах, например, когда сценарий не нужно загружать в браузер ни в коем случае, webpack позволяет настроить так называемую ленивую загрузку, чтобы он объединяет этот сценарий в свой собственный пакет и загружает его при необходимости, что завершается уменьшением проблемы узких мест в сети, уже упомянутой в части 1 этого серии.
Позже в этой серии мы увидим ленивую загрузку и многое другое.
Примечания:
- Зависимости, такие как lodash в нашем случае, будут связаны с webpack в дополнение к «webpack4-demo / src / index.js».
- DevDependencies, такие как webpack и webpack-cli в нашем случае, не будут связаны с webpack, поскольку их (DevDependencies) использование ограничено средой разработки.
Как вы заметили, мы ничего не настраивали, чтобы синтаксис импорта работал в «webpack4-demo / src / index.js» - import _ from ‘lodash’, и это потому, что поддержка webpack "из коробки" импорт и экспорт модулей JavaScript и JSON. Я пользуюсь этой возможностью, чтобы упомянуть, что, используя синтаксис импорта веб-пакетов, мы приходим к решению проблемы коллизии областей видимости (отсутствие глобального загрязнения области действия).
Но подождите, как веб-пакет узнает, как он должен объединять наш проект, не задавая ни входной файл, с которого он должен начинать объединение, ни место вывода, где он должен выдавать сгенерированный пакет?
Что ж, по умолчанию, когда мы запускаем webpack в корневой папке проекта, не передавая ему никаких аргументов CLI (интерфейса командной строки), он сгенерирует пакет, взяв «webpack4-demo / src / index.js» в качестве точки входа и «webpack4-demo / dist / main.js». ” в качестве выходного.
Наконец, откройте «webpack4-demo / dist / index.html» в своем браузере, и вы должны увидеть кнопку, когда вы нажимаете на нее, она предупреждает «Здравствуйте! webpack4 ».
Примечания:
- Помимо синтаксисов импорта и экспорта, webpack поддерживает другие синтаксисы, например, require.
- Старые браузеры не поддерживают современные функции ES2015 (EcmaScript2015). Как вы, наверное, заметили, мы использовали в «webpack4-demo / src / index.js» функцию ES2015, которая представляет собой синтаксис стрелочной функции
(args)=>{body function code}. Наш пакет не будет работать в этих старых браузерах. Для их поддержки мы должны перенести код ES2015 или более поздние версии ES (ECMAScript) в ES5 (ECMAScript 2009), поскольку это версия, наиболее поддерживаемая большим количеством браузеров, включая эти старые. Для этого мы должны настроить транспилятор, такой как Babel, с помощью загрузчиков веб-пакетов (мы увидим это также позже в этой серии).
Шаг 4: Использование файла конфигурации
Как мы видели, webpack4 не требует какой-либо конфигурации для объединения вашего проекта и использует для этого конфигурацию по умолчанию. Но в большинстве случаев нам нужно переопределить эту конфигурацию по умолчанию, в то время как конфигурации веб-пакетов проектов более сложны, чем просто сохранение конфигурации по умолчанию. Мы можем изменить эту конфигурацию по умолчанию, используя интерфейс командной строки веб-пакета или создав файл конфигурации веб-пакета. Использование того или другого зависит от контекста и сложности проекта. В большинстве случаев использование файла конфигурации более эффективно, поскольку его легко поддерживать, расширять и читать. .
Итак, давайте создадим наш файл конфигурации веб-пакета с именем «webpack4-demo / webpack.config.js», который выполняет ту же конфигурацию объединения, что и файл по умолчанию:
Теперь давайте сгенерируем наш пакет, используя наш новый файл конфигурации, как показано ниже:
npx webpack --config webpack.config.js
И если вы установите все в нужном месте, как я, вы увидите, что ваш файл пакета с именем «webpack4-demo / dist / main.js» успешно сгенерирован и вы можете проверить это, открыв файл «webpack4-demo / dist / index.html» в браузере.
Примечания:
- Если файл конфигурации вашего веб-пакета имеет имя «webpack.config.js», то он будет выбран веб-пакетом по умолчанию, даже если вы не укажете его в
--configаргументе команды. - Вы можете назвать свой файл конфигурации webpack любым именем, но вы должны указать его с помощью аргумента
--config, чтобы он был рассмотрен webpack. - У вас может быть несколько файлов конфигурации webpack (например, один для среды разработки, другой для производственной среды и т. Д.).
Шаг 5: Использование скрипта npm
Как было сказано выше (когда я делал заметку о npx на шаге 1), команда npx webpack --config webpack.config.js использует зависимость webpack dev, установленную в нашем проекте. Мы можем использовать этот двоичный файл (веб-пакет) напрямую, используя скрипт npm, не проходя через npx. Таким образом, вам не придется все время вручную писать --config (при необходимости), а вместо этого писать один раз.
Итак, давайте изменим наш package.json, как показано ниже:
Примечание. Ссылка на установленные пакеты с помощью сценариев npm является наилучшей практикой, поскольку позволяет всем участникам проекта использовать одну и ту же версию пакетов .
Теперь запустите команду ниже:
npx yarn run build
Затем вы должны увидеть, что ваш пакет «webpack4-demo / dist / main.js» сгенерирован, и когда вы откроете «webpack4-demo / dist /index.html » в браузере, ваше приложение должно работать как раньше.
Шаг 6: Заключение и перспективы
В этой части 2 этой серии мы узнали, как настроить, настроить и построить базовый проект с помощью webpack4. Мы также увидели, как использовать конфигурацию по умолчанию (с помощью интерфейса командной строки) и использовать файл конфигурации. Мы закончили упаковывать всю команду в сценарий npm, чтобы ее можно было легко запустить.
В следующей части мы увидим, как управлять, загрузкой и объединять ресурсы, например CSS , images, fonts и другие в нашем проекте.
Так что следите за обновлениями, я не могу дождаться, когда снова увижу вас со мной в этой прогулке по webpack4. Это действительно потрясающее человеческое и технологическое чувство.
Спасибо за ваше время.
Если у вас есть отзывы, предложения или вопросы, дайте мне знать!
