Начало работы

Webpack используется для компиляции модулей JavaScript. После установки, вы можете взаимодействовать с webpack, используя его командную строку или API. Если вы новичок в webpack, пожалуйста, ознакомьтесь с основными концепциями и этим сравнением, чтобы понять, почему его стоит использовать вместо других инструментов из сообщества.

Настройка

Сначала создадим директорию, инициализируем npm, установим webpack локально, и установим webpack-cli (инструмент для запуска webpack в командной строке):

mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

В рамках руководств мы будем использовать блоки diff, чтобы показать вам, какие изменения мы вносим в директории, файлы и код. Например:

+ this is a new line you shall copy into your code
- and this is a line to be removed from your code
  and this is a line not to touch.

Теперь создадим следующую структуру директорий, файлы и их содержимое:

project

  webpack-demo
  |- package.json
  |- package-lock.json
+ |- index.html
+ |- /src
+   |- index.js

src/index.js

function component() {
  const element = document.createElement('div');

  // Lodash, currently included via a script, is required for this line to work
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Getting Started</title>
    <script src="https://unpkg.com/lodash@4.17.20"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

Нам также нужно изменить наш package.json файл, чтобы убедиться, что мы пометили наш пакет как private, а также удалить запись main. Это предотвратит случайную публикацию вашего кода.

package.json

 {
   "name": "webpack-demo",
   "version": "1.0.0",
   "description": "",
-  "main": "index.js",
+  "private": true,
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "MIT",
   "devDependencies": {
     "webpack": "^5.38.1",
     "webpack-cli": "^4.7.2"
   }
 }

В этом примере есть неявные зависимости между тегами <script>. Наш index.js файл зависит от lodash, которое должно быть включено на странице до его выполнения. Это происходит потому, что index.js никогда явно не объявлял потребности в lodash; он предполагает, что глобальная переменная _ существует.

Есть проблемы с управлением проектами JavaScript таким образом:

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

Давайте воспользуемся webpack для управления этими скриптами вместо этого.

Создание пакета

Сначала немного изменим структуру директорий, разделив исходный код (./src) от кода дистрибутива (./dist). Исходный код — это код, который мы будем писать и редактировать. Код дистрибутива — это сжатый и оптимизированный output результата процесса сборки, который в конечном итоге будет загружен в браузере. Измените структуру директорий следующим образом:

project

  webpack-demo
  |- package.json
  |- package-lock.json
+ |- /dist
+   |- index.html
- |- index.html
  |- /src
    |- index.js

Чтобы объединить зависимость lodash с index.js, нам нужно установить библиотеку локально:

npm install --save lodash

Теперь давайте импортируем lodash в наш скрипт:

src/index.js

+import _ from 'lodash';
+
 function component() {
   const element = document.createElement('div');

-  // Lodash, currently included via a script, is required for this line to work
+  // Lodash, now imported by this script
   element.innerHTML = _.join(['Hello', 'webpack'], ' ');

   return element;
 }

 document.body.appendChild(component());

Теперь, поскольку мы собираемся объединять наши скрипты, нам нужно обновить наш index.html файл. Давайте удалим lodash <script>, так как мы теперь import его, и изменим другой тег <script> для загрузки пакета вместо исходного файла %%%CODE_BLOCK_37%%:

dist/index.html

 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />
     <title>Getting Started</title>
-    <script src="https://unpkg.com/lodash@4.17.20"></script>
   </head>
   <body>
-    <script src="./src/index.js"></script>
+    <script src="main.js"></script>
   </body>
 </html>

В этой настройке index.js явно требует наличия lodash и связывает его как _ (без загрязнения глобальной области видимости). Указывая, какие зависимости нужны модулю, webpack может использовать эту информацию для построения графа зависимостей. Затем он использует этот граф для генерации оптимизированного пакета, где скрипты будут выполняться в правильном порядке.

Сказав это, давайте запустим npx webpack, который возьмёт наш скрипт в src/index.js в качестве точки входа и сгенерирует dist/main.js в качестве выхода. Команда npx, которая поставляется с Node 8.2/npm 5.2.0 или более поздними версиями, запускает бинарник webpack (./node_modules/.bin/webpack) пакета webpack, который мы установили вначале:

$ npx webpack
[webpack-cli] Compilation finished
asset main.js 69.3 KiB [emitted] [minimized] (name: main) 1 related asset
runtime modules 1000 bytes 5 modules
cacheable modules 530 KiB
  ./src/index.js 257 bytes [built] [code generated]
  ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
webpack 5.4.0 compiled successfully in 1851 ms

Откройте index.html из директории dist в вашем браузере, и, если всё прошло правильно, вы должны увидеть следующий текст: 'Hello webpack'.

Модули

Инструкции import и export были стандартизированы в ES2015. Они поддерживаются большинством браузеров в настоящее время, однако некоторые браузеры не распознают новый синтаксис. Но не беспокойтесь, webpack поддерживает их из коробки.

На самом деле, webpack "транскрибирует" код для корректной работы в старых браузерах. Если вы изучите dist/main.js, вы сможете увидеть, как webpack это делает – это довольно изобретательно! Помимо import и export, webpack поддерживает и другие синтаксические конструкции модулей, для получения дополнительной информации см. API модулей.

Обратите внимание, что webpack не будет изменять код, кроме import и export операторов. Если вы используете другие функции ES2015, убедитесь, что вы используете транспилятор, такой как Babel через систему загрузчиков webpack .

Использование конфигурации

Начиная с версии 4, webpack не требует никакой конфигурации, но большинство проектов нуждаются в более сложной настройке, поэтому webpack поддерживает файл конфигурации. Это намного эффективнее, чем вводить множество команд в терминале, поэтому давайте создадим один:

project

  webpack-demo
  |- package.json
  |- package-lock.json
+ |- webpack.config.js
  |- /dist
    |- index.html
  |- /src
    |- index.js

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

Теперь давайте запустим сборку снова, но вместо этого будем использовать новый файл конфигурации:

$ npx webpack --config webpack.config.js
[webpack-cli] Compilation finished
asset main.js 69.3 KiB [compared for emit] [minimized] (name: main) 1 related asset
runtime modules 1000 bytes 5 modules
cacheable modules 530 KiB
  ./src/index.js 257 bytes [built] [code generated]
  ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
webpack 5.4.0 compiled successfully in 1934 ms

Файл конфигурации предоставляет гораздо больше гибкости, чем использование командной строки. С его помощью можно указать правила загрузчиков, плагины, параметры разрешения и многие другие улучшения. Подробнее см. документацию по конфигурации.

Скрипты NPM

Учитывая, что запуск локальной копии webpack из командной строки не очень удобно, мы можем создать небольшой ярлык. Давайте изменим package.json, добавив скрипт npm:

package.json

 {
   "name": "webpack-demo",
   "version": "1.0.0",
   "description": "",
   "private": true,
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "webpack": "^5.4.0",
     "webpack-cli": "^4.2.0"
   },
   "dependencies": {
     "lodash": "^4.17.20"
   }
 }

Теперь команда npm run build может быть использована вместо команды npx, которую мы использовали ранее. Обратите внимание, что внутри scripts мы можем ссылаться на локально установленные пакеты npm по имени точно так же, как и с npx. Эта конвенция является стандартной в большинстве проектов, основанных на npm, поскольку она позволяет всем участникам использовать один и тот же набор общих скриптов.

Теперь выполните следующую команду и проверьте, работает ли ваш псевдоним скрипта:

$ npm run build

...

[webpack-cli] Compilation finished
asset main.js 69.3 KiB [compared for emit] [minimized] (name: main) 1 related asset
runtime modules 1000 bytes 5 modules
cacheable modules 530 KiB
  ./src/index.js 257 bytes [built] [code generated]
  ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
webpack 5.4.0 compiled successfully in 1940 ms

Заключение

Теперь, когда у вас есть базовая сборка, переходите к следующему руководству Asset Management, чтобы узнать, как управлять ресурсами, такими как изображения и шрифты, с помощью webpack. На этом этапе ваш проект должен выглядеть так:

project

webpack-demo
|- package.json
|- package-lock.json
|- webpack.config.js
|- /dist
  |- main.js
  |- index.html
|- /src
  |- index.js
|- /node_modules

Если вы хотите узнать больше о разработке webpack, вы можете ознакомиться с страницами основных концепций и конфигурации. Кроме того, раздел API подробно описывает различные интерфейсы, предлагаемые webpack.

© JS Foundation and other contributors
Licensed under the Creative Commons Attribution License 4.0.
https://webpack.js.org/guides/getting-started