Что делает Webpack и как я могу использовать его для своего веб-сайта?

Webpack — это утилита, которая может объединять ваши файлы JavaScript. Это позволяет вам быть более организованным и продуктивным, а также позволяет использовать предварительно обработанные языки, такие как SASS и TypeScript.

Для чего нужен вебпак?

Представьте, что вы работаете над веб-сайтом с большим количеством пользовательского JavaScript. Вы были в этом проекте какое-то время, и все быстро вышло из-под контроля. Ваш index.html содержит 20 различных тегов <script> и все они относятся к разным файлам; некоторые из них являются вашими собственными, некоторые — внешними ресурсами, от которых вы зависите. Управлять ими непросто, особенно из-за того, как большинство браузеров справляются с загрузкой JavaScript. Как вы гарантируете, что ваш код будет запущен после загрузки jQuery? Обычно вы просто физически ставите jQuery первым в HTML, но с этим сложно справиться из-за многих несоответствий.

Существует также проблема производительности. Каждый файл сценария необходимо загружать отдельно. И что еще хуже, большая часть JavaScript блокирует рендеринг, а это означает, что ваш веб-сайт даже не будет отображаться, пока он не завершит загрузку, анализ и запуск JavaScript. Вы можете увидеть это в действии на вкладке «Сеть» в Chrome Dev Tools, где показаны отправляемые запросы. Чем больше запросов вы сделаете, тем больше времени может потребоваться для их выполнения.

Решением здесь является объединение. Вместо того, чтобы ссылаться на внешние ресурсы, вы загружаете их все локально и включаете в качестве зависимостей своего кода. Webpack объединяет все это в один файл main.js, содержащий все, что нужно вашему сайту. Затем вы просто включили этот файл JavaScript и избавились от всех остальных тегов <script>.

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

Webpack помогает вам организовать активы вашего сайта

Короче говоря, Webpack позволяет использовать функцию require() для включения одного файла JavaScript в другой. Это не поддерживается ни в одном браузере, так как его необходимо запустить с помощью сборщика JavaScript, такого как Webpack, Gulp или Browserify, перед отправкой клиенту. Это может быть что-то простое, например, импорт зависимости из npm:

var axios = require('axios') //node_modules/axios/index.js

Или что-то более сложное, например, использование изображений в JavaScript:

<img src={ require('../../assets/logo.png') } />

В любом случае строка в функции require передается загрузчикам Webpack. Это то, что определяет, как Webpack обрабатывает файлы. Например, мы могли бы использовать file-loader для обработки изображений:

{
  test: /.(png|jpe?g|gif)$/,
  use: [
    {
      loader: 'file-loader',
      options: {},
    },
  ],
}

Если регулярное выражение в test совпадает с именем файла, используется загрузчик. В этом случае file-loader создаст URL-адрес в соответствии с вашей конфигурацией в зависимости от того, где оказался этот файл. Теперь, когда мы создадим наши файлы, тег img будет выглядеть примерно так:

<img src={ 'https://cdn.yourwebsite.com/img/341234/logo.png' } />

Это позволяет вам иметь очень организованную файловую структуру, так как вам больше не нужно беспокоиться о расположении файлов и добавлении дополнительных тегов <script> и <link> . Нередко — особенно с такими фреймворками, как React — иметь проекты, которые выглядят так:

src/
  |_styles/
  |  |_global.css
  |  |_darkTheme.css
  |_components/
  |  |_styles/
  |  |  |_buttonStyles.css
  |  |_button.js
  |_containers/
  |  |_homepage.js
  |  |_users.js
  |_index.js
  |_app.js
  |_package.json

В отличие от index.js длиной 2000 строк. Это значительно упрощает разработку в долгосрочной перспективе, поскольку в начале требуется немного времени для перехода к среде на основе Webpack.

Webpack позволяет использовать препроцессоры

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

Например, SASS — это препроцессор для CSS, добавляющий поддержку переменных, вложенность, смешивание, импорт и наследование и многое другое. Это потрясающе, и самое приятное то, что он полностью совместим с обычным CSS, поэтому вам не нужно беспокоиться о поддержке браузера. Конечный пользователь никогда не узнает, что вы использовали SASS для создания своего сайта, потому что вы превращаете код SASS в код CSS при связывании с webpack.

Другой полезный предварительно обработанный язык — TypeScript от Microsoft. TypeScript — это синтаксический надмножество JavaScript, что означает, что весь код JavaScript является действительным кодом TypeScript, и он добавляет поддержку строгих типов, превращая JavaScript в строго типизированный язык, такой как варианты C. На самом деле это скомпилированный язык, использующий утилиту tsc , но расширение Webpack ts-loader добавляет его поддержку. Загрузчик скомпилирует ваши файлы .ts в файлы .js.

Если вы уже довольны ванильным CSS и JavaScript, вам не нужно использовать какие-либо препроцессоры, но тем, кто хочет использовать ванильный синтаксис следующего поколения, мы рекомендуем вам хотя бы установить Babel для поддержки ES2015 и выше. Это позволит вам использовать такие функции ES2015, как import и функции со стрелками.

Как настроить вебпак

Во-первых, вам нужно установить Node, чтобы вы могли запускать JavaScript вне браузера. Затем вы можете установить Webpack из диспетчера пакетов Node (npm). Запустите эти команды из корня папки вашего проекта:

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

При этом создается новый файл package.json, в котором отслеживаются установленные вами пакеты. Вы должны увидеть новую папку с именем node_modules.

Теперь Webpack установлен, и вы можете запустить его с помощью:

npx webpack

Это предполагает, что точкой входа для вашего проекта является ./src/index, и вы хотите, чтобы связанный файл находился в dist/main.js. Если вы хотите настроить свою установку по-другому или настроить загрузчики, вам необходимо создать файл конфигурации. Существует множество вариантов, которые вы можете использовать, и настройка будет зависеть от того, для чего вы используете Webpack, но в большинстве случаев файл конфигурации будет помещен в корень вашего проекта как webpack.config. js. Вам нужно будет загрузить это с флагом --config , но вы можете автоматизировать это, указав скрипт в package.json:

"scripts": {
  "build": "webpack --config webpack.config.js"
}

Теперь, когда вы запускаете:

npm run build

Webpack запустит и свяжет ваш проект.

Если вы не хотите запускать «npm run build» после каждого внесенного вами изменения, вам следует установить webpack-dev-server, который будет автоматически перестраиваться при изменении сделаны.