Учебник по началу работы с Webpack

Webpack — это инструмент для загрузки/сборки ресурсов фронтенда. Он выполняет статический анализ на основе зависимостей модулей, а затем генерирует соответствующие статические ресурсы из этих модулей в соответствии с заданными правилами.

Эта глава протестирована и проверена на основе Webpack 3.0.

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

Далее мы кратко расскажем об установке и использовании Webpack.

Установка Webpack

Перед установкой Webpack ваша локальная среда должна поддерживатьnode.js。

Поскольку установка через npm медленная, в этом руководстве используется зеркало Taobao и его команда cnpm. Инструкции по установке и использованию см.:Использование зеркала Taobao NPM。

Установите webpack с помощью cnpm:

cnpm install webpack -g

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

Далее создадим каталог app:

mkdir app

Добавьте файл example1.js в каталог app со следующим кодом:

файл app/example1.js

document.write("It works.");

Добавьте файл index.html в каталог app со следующим кодом:

файл app/index.html

Далее мы используем команду webpack для сборки:

webpack example1.js bundle.js

Выполнение приведённой выше команды скомпилирует файл example1.js и создаст файл bundle.js. В случае успеха выходная информация выглядит так:

Hash: a41c6217554e666594cb
Version: webpack 1.12.13
Time: 50ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.42 kB       0  [emitted]  main
   [0] ./example1.js 29 bytes {0} [built]

Откройте index.html в браузере, результат вывода будет следующим:

Создайте второй JS-файл

Далее мы создаём ещё один js-файл example2.js со следующим кодом:

файл app/example2.js

module.exports = "Это работает из example2.js.";

Обновите файл example1.js со следующим кодом:

файл app/example1.js

document.write(require("./example2.js"));

Далее мы используем команду webpack для сборки:

webpack example1.js bundle.js Хэш: dcf55acff639ebfe1677 Версия: webpack 1.12.13 Время: 52ms Ресурс Размер Чанки Чанк Имена bundle.js 1.55 kB 0 [создан] main [0] ./example1.js 41 bytes {0} [собран] [1] ./example2.js 46 bytes {0} [собран]

Откройте это в браузере, и результат вывода будет следующим:

webpack выполняет статический анализ на основе зависимостей модулей, и эти файлы (модули) будут включены в файл bundle.js. Webpack присваивает каждому модулю уникальный id и использует этот id для индексации и доступа к модулю. При запуске страницы сначала выполняется код в example1.js, а другие модули выполняются при вызове require.

ЗАГРУЗЧИК

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

Следовательно, если нам нужно добавить CSS-файлы в наше приложение, нужно использовать css-loader и style-loader. Они делают две разные вещи: css-loader обходит CSS-файлы, находит выражения url() и обрабатывает их; style-loader вставляет исходный код CSS в тег style на странице.

Далее мы используем следующую команду для установки css-loader и style-loader (глобальная установка требует параметра -g).

cnpm install css-loader style-loader

После выполнения вышеуказанной команды в текущем каталоге будет создан каталог node_modules. Это каталог установки для css-loader и style-loader.

Далее создайте файл style.css со следующим кодом:

файл app/style.css

body { background: yellow; }

Измените файл example1.js со следующим кодом:

файл app/example1.js

require("!style-loader!css-loader!./style.css"); document.write(require("./example2.js"));

Далее мы используем команду webpack для сборки:

webpack example1.js bundle.js Хеш: a9ef45165f81c89a4363 Версия: webpack 1.12.13 Время: 619ms Ресурс Размер Чанки Чанк Имена bundle.js 11.8 kB 0 [создан] main [0] ./example1.js 76 bytes {0} [собран] [5] ./example2.js 46 bytes {0} [собран] + 4 скрытые модули

Откройте это в браузере, и результат вывода будет следующим:

При подключении CSS-файлов нужно указывать префикс загрузчика!style-loader!css-loader!Конечно, мы можем автоматически привязать нужный загрузчик в зависимости от типа модуля (расширения). В файле example1.js изменитеrequire("!style-loader!css-loader!./style.css")Изменить наrequire("./style.css") ：

файл app/example1.js

require("./style.css"); document.напишите(require("./example2.js"));

Затем выполните:

webpack example1.js bundle.js --module-bind 'css=style-loader!css-loader'

Откройте это в браузере, и результат вывода будет следующим:

Очевидно, эти два способа использования загрузчиков дают одинаковый эффект.

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

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

Создайте файл webpack.config.js со следующим кодом:

файл app/webpack.config.js

module.exports = { entry: "./example1.js", output: { path: __dirname, filename: "bundle.js" }, module: { loaders: [ { test: /\.css$/, loader: "style-loader!css-loader" } ] } };

Далее нам нужно всего лишь выполнить команду webpack, чтобы сгенерировать файл bundle.js:

webpack Хеш: 4fdefac099a5f36ff74b Версия: webpack 1.12.13 Время: 576ms Ресурс Размер Чанки Имена чанков bundle.js 11.8 kB 0 [сгенерирован] main [0] ./example1.js 65 bytes {0} [собран] [5] ./example2.js 46 bytes {0} [собран] + 4 скрытые модули

После выполнения команды webpack по умолчанию будет загружен файл webpack.config.js из текущего каталога.

Плагины

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

Webpack поставляется с некоторыми встроенными плагинами, а дополнительные плагины можно установить через cnpm.

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

cnpm install webpack --save-dev

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

Измените webpack.config.js, используя следующий код:

файл app/webpack.config.js

var webpack=require('webpack'); module.exports = { entry: "./example1.js", output: { path: __dirname, filename: "bundle.js" }, module: { loaders: [ { test: /\.css$/, loader: "style-loader!css-loader" } ] }, plugins:[ new webpack.BannerPlugin('Пример руководства: пример webpack') ] };

Затем выполните:

webpack

Откройте bundle.js, и вы увидите информацию в виде комментария, которую мы указали в верхней части файла.

Среда разработки

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

webpack --progress --colors

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

webpack --progress --colors --watch

Конечно, мы можем использовать сервер разработки webpack-dev-server. Таким образом, мы можем запустить express-сервер статических ресурсов через localhost:8080, и он автоматически запустит webpack в режиме watch. Открытие http://localhost:8080/ или http://localhost:8080/webpack-dev-server/ в браузере позволяет просматривать страницы проекта и скомпилированный вывод ресурсов. Он также отслеживает изменения в реальном времени через сервис socket.io и автоматически обновляет страницу.

# Установка cnpm install webpack-dev-server -g # Запуск webpack-dev-сервер --прогресс --цвета

Откройте http://localhost:8080/ в браузере, результат вывода выглядит следующим образом: