В этой статье будут рассмотрены все основные идеи, лежащие в основе webpack - сборщика модулей. Вы узнаете, как настроить webpack, добавить ресурсы, добавить файлы css, связать файл js, запустить сервер, сборку prod и dev и многое другое…

Какие темы освещаются в этой статье:

  • 1. Простейший проект и установка Webpack;
  • 2. Файл конфигурации;
  • 3. Восстановить пакет при сохранении файла;
  • 4. Использование webpack-dev-server;
  • 5. Несколько файлов в комплекте;
  • 6. Использование загрузчиков
  • 7. Сборки для производства и разработки
  • 8. Добавление HTML файла в сборку.
  • 9. Добавление CSS в сборку
  • 9.1 Добавление CSS в J.S. пучок
  • 9.2 Добавление CSS отдельным пакетом
  • 10. Добавление ассетов в сборку

1. Простейший проект и установка Webpack

Я думаю, вы, вероятно, знаете, как начать npm проект с зависимостями, но все же, если вы этого не сделаете, не беспокойтесь, просто запустите эти команды в папке вашего проекта, и после этого вы готовы к работе 😉

npm init
npm install webpack webpack-cli --save-dev

После этого нам нужно будет добавить index.html файл с простым script.js файлом:

Как вы, наверное, заметили, мы указали неправильный путь src к нашему файлу сценария (у нас нет папки dist в нашем проекте), но вы поймете "Почему" через мгновение.

Что будет, если мы запустим npx webpack ./script в папке simplest-example без какой-либо конфигурации веб-пакета?

Да, будет создана dist папка с новым main.js файлом в ней.

Как видите, webpack не будет очень полезен для такого небольшого проекта, как этот, но когда ваш проект будет расти все больше и больше, когда вы добавите дополнительные файлы npm packages, _11 _ / _ 12_, images, documents и т. д. webpack будет очень полезен для создания файла bundle со всеми необходимыми данными для работы вашего приложения.

P.S. Если вы поместите файл сценария в папку /src и переименуете файл сценария в index.js - ›, вы можете запустить команду npx webpack без указания пути к файлу. Результат будет точно таким же, как и предыдущий: /dist/main.js

Теперь давайте запустим наше приложение и посмотрим, что будет:

Поскольку я использую IDE Webstorm, файл index.html запущен на сервере IDE (из-за этого вы видите localhost:63342 на скриншоте), но вы можете просто открывать html-файлы, просто открывая их в любом браузере.

Большой! А теперь давайте добавим немного сложности и сделаем несколько очень крутых вещей.

2. Файл конфигурации

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

Итак, давайте создадим файл конфигурации webpack.config.js:

А что будет, если после добавления этого конфига мы запустим npx webpack? Точно так же, как и без него.

Модуль path (ядро Node.js, сторонние библиотеки не требуются) предоставляет утилиты для работы с путями к файлам и каталогам. Для лучшего понимания результатов пути давайте запишем в консоль значение thepath.resolve(__dirname, 'dist'):

> LOG /Users/artem.diashkin/PROJECTS/MEDIUM/webpack-examples/simplest-example/dist

Итак, давайте изменим несколько значений конфигурации и посмотрим, что изменится в результатах webpack? После этого, я думаю, вы получите основную идею этих свойств конфигурации ...

  1. Сделайте файл пакета приложения внутри корневой папки приложения (в нашем случае /simplest-example):

2. Создайте файл пакета приложения в настраиваемой папке приложения:

3. Сделайте файл пакета приложения внутри файла с произвольным именем:

Думаю, теперь вы прекрасно разбираетесь в этих свойствах.

3. Восстановить пакет при сохранении файла.

Если вы добавите флаг --watch к команде npx webpack, webpack будет автоматически обновлять файл пакета каждый раз, когда вы изменяете и сохраняете свой код:

И вы можете добиться того же результата, если захотите watch: true в webpack.config.js файл:

4. Использование webpack-dev-server

Мы можем запустить наше приложение с помощью webpack-dev-server и настроить его с помощью файла webpack.config.js:

Во-первых, нам нужно добавить webpack-dev-server к нашим зависимостям dev npm:

npm install --save-dev webpack-dev-server

Затем запустите npx webpack с этой конфигурацией, чтобы наш пакет был помещен в корневую папку:

После установки webpack-dev-server вы можете запустить:

npx webpack-dev-server

Но я добавлю скрипт в package.json файл:

"scripts": {
  ...
  "start:dev": "webpack-dev-server"
},

После запуска этого сценария yarn start:dev ваш сервер начнет работать с http://localhost:8080/ (по умолчанию). А после изменения и сохранения файла webpack-dev-server автоматически повторно развернет новую версию:

Если вы хотите настроить свой сервер - загляните в официальную документацию по этому поводу.

5. Несколько файлов в комплекте.

Добавим новый J.S. файлы, но ... Один из них будет импортирован в index.js файл, а другой - нет. Что с ними будет делать webpack?

Посмотрим на новый обновленный main.js файл и сборку нашего сервера:

Как вы заметили, файл two.js не был добавлен в пакет, потому что он не используется в нашем приложении (нет импорта в index.js). Но что делать, какие конфиги нужно менять, чтобы two.js файл был включен в бандл?

Давайте посмотрим, что было сгенерировано:

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

6. Использование загрузчиков

Загрузчики - это дополнительные функции, которые вы добавляете в webpack, без них по умолчанию webpack знает, как обрабатывать файлы js с помощью импорта js requier.

Использование ES6 в нашем приложении

Как вы помните, при импорте файла one.js мы использовали нотацию require.

Мы можем использовать babel для звезды, используя новый J.S. такие функции, как import. В первую очередь нам нужно добавить эти пакеты в зависимости от разработчиков:

npm install -D babel-loader @babel/core @babel/preset-env

Затем нам нужно добавить файл конфигурации babel .babelrc в корень вашего проекта с этой конфигурацией (Ссылка на официальную @babel/preset-env документацию):

И после добавления дополнительной конфигурации в наш webpack.config.js файл о модуле babel…

… Мы можем использовать формат ES6 import в нашем J.S. files, а все остальное Webpack сделает автоматически:

И результат будет тот же:

P.S. В нашем файле пакета будет всего несколько изменений:

Мы обсудим, как обращаться с html, css, images в следующих главах (например, 8.Adding HTML file into the build)

7. Сборки для производства и разработки

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

«Общий» файл конфигурации следует «использовать» в файлах конфигурации dev и prod, потому что они будут совместно использовать эту общую конфигурацию (поэтому нам не нужно будет копировать и вставлять параметры конфигурации). Для этого нам понадобится webpack-merge пакет npm:

npm install --save-dev webpack-merge
// or
yarn add webpack-merge -D

После установки пакета webpack-merge мы создадим:

  • webpack.common.js
  • webpack.dev.js и…
  • webpack.prod.js файлы конфигурации:

webpack.common.js полностью соответствует описанию в главе 6.

После добавления сценариев build и build:dev в наш package.json файл…

"scripts": {
  ...
  "build": "webpack --config webpack.prod.js",
  "build:dev": "webpack --config webpack.dev.js",
},

… Запустим их и посмотрим на результаты…

Производственная среда (сборка пряжи)

webpack v4 + минимизирует ваш код по умолчанию в «производственном режиме».

Среда разработки (сборка пряжи: dev)

Теперь вы можете легко добавлять новые функции в prod или dev файлы конфигурации webpack по отдельности.

!! webpack-dev-server будет искать файл webpack.config.js, он ничего не знает о ваших конфигах dev или prod. Давайте посмотрим на нескольких примерах:

В настоящее время у нас есть два файла конфигурации в нашем проекте webpack.common.js и webpack.config.js. Начнем webpack-dev-server, выполнив эту команду:

npx webpack-dev-server

Как видите, наш сервер запущен на порту 8081, определенном в файле webpack.config.js.

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

npx webpack-dev-server --config webpack.common.js

Теперь наш сервер запустился на 9000 порту, здорово.

8. Adding HTML file into the build

В настоящее время у нас есть index.html файл в папке /public. Как мы можем переместить его в папку /build во время сборки веб-пакета? Для этой задачи нам понадобится html-webpack-plugin:

npm install --save-dev html-webpack-plugin
yarn add html-webpack-plugin -D

После этого нам нужно будет добавить некоторые параметры конфигурации в наш webpack.common.js файл:

Посмотрим на результат:

Как видите, index.html в папке /build, это та же копия index.html в папке /public. Но что будет, если установить inject:true. Давайте посмотрим:

Запускаем npx webpack — config webpack.dev.js:

Как видите, свойство inject:true добавит путь к нашему bundle.js файлу в наш «шаблон» - файл index.html. Введенный путь - ›представляет собой комбинацию свойств output.publicPath и output.filename в нашем webpack.commom.js файле конфигурации.

9. Добавление CSS в сборку

Хорошо, теперь мы хотели бы импортировать удобный файл CSS reset в наш index.html, чтобы вначале все наши стили были одинаковыми для всех браузеров (как вы знаете каждый браузер использует свои собственные стили по умолчанию).

9.1 Добавление CSS в J.S. пучок

Мы добавили эти стили сброса в наш проект, импортировали его, но ...

… Webpack не умеет работать с файлами CSS. В этом случае нам нужно добавить css-loader и style-loader:

npm install --save-dev css-loader style-loader
// or
yarn add css-loader style-loader -D

После этого мы должны добавить новую конфигурацию в webpack.common.js файл:

Теперь давайте запустим новую сборку npx webpack — config webpack.dev.js и посмотрим на результаты:

Как видите, все наши стили (поля, отступы и т. Д.) Были удалены. А что мы будем добавлять свои стили?

Ну все работает как положено! 😉

9.2 Добавление CSS отдельным пакетом

Но что, если мы этого не хотим и хотели бы иметь отдельный файл CSS в нашей папке сборки?

В этом случае мы будем использовать плагин mini-css-extract-plugin с ранее добавленным css-loader:

npm install --save-dev mini-css-extract-plugin
// or
yarn add mini-css-extract-plugin -D

После добавления этого пакета в ваш проект мы изменим конфигурационный файл нашего веб-пакета:

Повторить npx webpack — config webpack.prod.js:

Даже если вы запустите webpack в производственном режиме - файл CSS не будет уменьшен.

И нашим последним штрихом будет сворачивание файла CSS.

Во-первых, мы добавим пакет optimize-css-assets-webpack-plugin в ваши зависимости разработчика:

npm install --save-dev optimize-css-assets-webpack-plugin
// or
yarn add optimize-css-assets-webpack-plugin -D

Затем нам нужно изменить файл конфигурации webpack:

Повторить npx webpack — config webpack.prod.js:

Большой! Хорошая работа 👍

Все работает как положено. Теперь вы знаете оба способа добавления стилей CSS в сборку веб-пакета 👨‍🎓.

10. Добавление ассетов в сборку

Для добавления файлов в нашу папку / build нам нужно добавить file-loader пакет в зависимости dev нашего проекта:

npm install --save-dev file-loader
// or
yarn add file-loader -D

И после этого нам нужно будет добавить новый объект конфигурации в module.rules config webpack:

Для тестирования функциональности file-loader нам нужно добавить изображение в наши проекты и импортировать его на страницу index.html, давайте сделаем это:

addImage.js код файла:

Повторите npx webpack — config webpack.prod.js и посмотрим на результат:

Очень хорошо.

Теперь у вас есть вся основная информация, необходимая для понимания того, как работает webpack. 🤝

P.S. Если вы React.js разработчик, вы должны быть знакомы со сценарием eject (если вы работаете с проектом React.js, созданным с помощью сценария create-react-app):

"scripts": {
  ...
  "eject": "react-scripts eject"
},

Если вы запустите его, вы увидите весь используемый webpack.config.js файл. Или вы можете просто увидеть этот GitHub Gist, который я создал для вас после извлечения. 😉

Ссылка на Репозиторий Github со всем кодом, который использовался в этой статье.

Если вам понравился этот рассказ, вы можете также проверить Список всех моих рассказов. Удачного кодирования 🎉