Несколько месяцев назад я начал экспериментировать с 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, есть еще много чего, что нужно охватить ... Если у меня будет время, я могу написать вторую статью, посвященную другим загрузчикам и плагинам в ближайшем будущем.

Надеюсь, вам понравилась эта статья, если у вас есть какие-либо вопросы, предложения или если вам нужны разъяснения, не стесняйтесь комментировать :)

Использованная литература :

Github: https://github.com/bishesh16/simple-webpack