Spec-Zone.ru › webpack 4

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

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

Настройка

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

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

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

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

project

  webpack-demo
  |- package.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>
    <title>Getting Started</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

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

Если вы хотите узнать больше о внутренней работе package.json, рекомендуем прочитать документацию npm.

package.json

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

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

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

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

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

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

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

project

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

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

npm install --save lodash

При установке пакета, который будет включён в ваш пакет для производства, используйте npm install --save. Если вы устанавливаете пакет для целей разработки (например, линтеры, библиотеки тестирования и т.д.), используйте npm install --save-dev. Более подробную информацию можно найти в документации npm.

Теперь импортируем 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
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
  }

  document.body.appendChild(component());

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

dist/index.html

  <!doctype html>
  <html>
   <head>
     <title>Getting Started</title>
-    <script src="https://unpkg.com/lodash@4.16.6"></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

...
Built at: 13/06/2018 11:52:07
  Asset      Size  Chunks             Chunk Names
main.js  70.4 KiB       0  [emitted]  main
...

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

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

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

Если при открытии index.html в браузере появляется синтаксическая ошибка в середине сжатого JavaScript, установите development mode и снова запустите npx webpack. Это связано с запуском npx webpack на последней версии Node.js (v12.5+) вместо версии LTS.

Модули

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

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

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

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

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

project

  webpack-demo
  |- package.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

...
  Asset      Size  Chunks             Chunk Names
main.js  70.4 KiB       0  [emitted]  main
...

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

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

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

Сценарии npm

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

package.json

  {
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "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": "^4.20.2",
      "webpack-cli": "^3.1.2"
    },
    "dependencies": {
      "lodash": "^4.17.5"
    }
  }

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

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

npm run build

...
  Asset      Size  Chunks             Chunk Names
main.js  70.4 KiB       0  [emitted]  main
...

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/.

Пользовательские параметры можно передать в webpack, добавив две черты между командой npm run build и параметрами, например, npm run build -- --colors.

Заключение

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

project

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

Если вы используете npm 5, вы, вероятно, также увидите файл package-lock.json в вашей директории.

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

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

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API