Несколько месяцев назад я начал экспериментировать с webpack, и я помню, как мне пришлось пережить боль, чтобы запустить его. Информация, которую я собирал из разных онлайн-уроков, очень сбивала с толку; некоторые из них были устаревшими и давали странные ошибки npm, другие входили в расширенные функции webpack. Именно по этой причине я решил написать очень короткое и базовое руководство по веб-пакету 3 для людей, у которых есть такие же проблемы, как и у меня, по использованию веб-пакета.
Webpack - это сборщик модулей, который позволяет создавать веб-приложение с несколькими модулями, написанными на JS, HTML и CSS. Прелесть веб-пакета заключается в том, что он позволяет объединить все приложение и его зависимости в небольшое количество статических ресурсов (например, HTML / CSS / JS).
Итак, приступим! Мы начнем с настройки проекта, настройки webpack и создания простого приложения webpack 3.
Настройка проекта
- Создайте пустую папку и инициализируйте ее:
> mkdir simple-webpack && cd simple-webpack && npm init
- Создайте папки
src
иdist
:> mkdir src dist src/css
- Создайте
webpack.config.js
, который будет содержать всю конфигурацию для webpack.> touch webpack.config.js
- Установите
webpack
иwebpack-dev-server
:> npm install -D webpack@3 webpack-dev-server@2
- Давайте отредактируем файл
package.json
, чтобы добавить команды webpack и webpack-dev-server:
Настройка webpack
Webpack поставляется с файлом конфигурации webpack.config.js
, который имеет следующую структуру:
var config = { entry: { ... }, output: { ... }, module: { rules: [ ... ] } }
В основном файл конфигурации состоит из трех разделов:
- entry
: определяет, где находятся ваши исходные файлы.
- output
: это папка, в которой находится webpack создает объединенные ресурсы
- rules
: содержит загрузчики, применяемые для каждого типа файла (например, .js, .css, .scss и т. д.)
- Настроить ввод и вывод довольно просто, нам просто нужно указать на исходную папку и папку вывода, которые мы создали ранее.
context: __dirname + '/src', // base folder for our source files entry: { app: './main.js', }, output: { path: __dirname + '/dist', filename: 'bundle.js', },
Загрузчики
Для нашего руководства нам нужно будет добавить несколько основных загрузчиков. Загрузчик - это инструмент, который заботится о предварительной обработке и преобразовании файлов определенного типа (JS, CSS,…) в пакет javascript.
В нашем примере мы будем использовать 3 основных загрузчика:
babel-loader
для файлов JS:> npm install -D babel-loader babel-core
Давайте настроим этот загрузчик, добавив правило вmodule/rules
разделwebpack.config.js
module: { rule: [ { test: /\.js$/, // rule for .js files exclude: /node_modules/, loader: "babel-loader" // name of the loader } ] }
Это довольно просто, нам просто нужно предоставить выражение регулярного выражения, соответствующее файлам, к которым мы хотим применить загрузчик, и имени загрузчика.
style-loader
иcss-loader
для файлов CSS:> npm install -D css-loader style-loader
{ test: /\.css$/, use: ['style-loader', // order is important ! 'css-loader'] // this is loaded first }
file-loader
для загрузки файлов HTML:> npm install -D file-loader
Вот наш последний webpack.config.js
Создание простого приложения
Это все, что касается конфигурации веб-пакета, давайте продолжим и создадим наше базовое приложение, состоящее из 3 файлов:
- main.js
- index.html:
- css / style.css
#hello { font-weight: bold; }
Итак, если вы все выполнили правильно, вот как должна выглядеть ваша структура папок.
Создание приложения
Давайте создадим наше приложение с помощью webpack. Это довольно просто: нам просто нужно запустить сценарии, которые мы определили ранее.
Webpack в режиме разработки
> npm run build
: это запустит webpack в режиме разработки, скомпилирует наш код в ./src
и построит скомпилированные ресурсы в ./dist
Идите и проверьте папку ./dist
, вы сможете найти скомпилированные ресурсы.
Webpack в производственном режиме
Производственный режим применяет ряд оптимизаций, чтобы уменьшить наши целевые файлы, он также скрывает JS, что затрудняет чтение скомпилированного JS для всех остальных.
> npm run build:prod
Если вам интересно и вы хотите увидеть, чем рабочий режим отличается от режима разработки, не стесняйтесь сравнить содержимое файла ./dist/bundle.js
.
Это здорово, но как я могу увидеть свое приложение в браузере?
Конечно, мы собираемся использовать webpack-dev-server
для отображения нашего приложения в браузере.
Запуск приложения в браузере
webpack-dev-server
- хороший инструмент для целей разработки, он не только запускает веб-пакет, но и обслуживает файлы, чтобы мы могли видеть приложение в веб-браузере. Он также включает горячую перезагрузку, поэтому мы можем изменить любой исходный файл, а веб-пакет будет перекомпилировать, автоматически объединить его и обновить страницу с изменениями без необходимости обновлять браузер.
Достаточно сказано, давайте посмотрим, как это работает.
> npm run dev
Вот и все, что теперь приложение готово для просмотра в веб-браузере !! вперед и введите http://localhost:8080
в своем браузере.
Теперь давайте попробуем функцию горячей перезагрузки; перейдите и измените style.css
следующим образом и сохраните файл:
#hello { font-weight: bold; color: green; }
Итак, веб-страница обновилась автоматически, и стиль текста изменился. Разве это не круто :)?
БОНУС: раздача файлов на экспресс-сервере
Если вы похожи на меня и хотите обслуживать скомпилированные ресурсы с помощью экспресс-сервера на вашем локальном компьютере, продолжайте читать. Express - очень мощный и простой в использовании веб-сервер. Давай установим.
> npm install -D express@4
- Давайте создадим
server.js
для обслуживания файлов из папки ./dist
Наконец, давайте создадим наше приложение в производственном режиме и будем обслуживать его локально с помощью Express Server.
> npm run build:prod
> npm run start
будет обслуживать приложение наhttp://localhost:3000
Вот и все! Теперь у вас есть приложение webpack производственного уровня, работающее на вашем локальном компьютере.
Как я уже упоминал, это должен был быть очень простой учебник по webpack, есть еще много чего, что нужно охватить ... Если у меня будет время, я могу написать вторую статью, посвященную другим загрузчикам и плагинам в ближайшем будущем.
Надеюсь, вам понравилась эта статья, если у вас есть какие-либо вопросы, предложения или если вам нужны разъяснения, не стесняйтесь комментировать :)
Использованная литература :