Webpack: настраиваем сборку приложения | OTUS
🔥 Начинаем BLACK FRIDAY!
Максимальная скидка -25% на всё. Успейте начать обучение по самой выгодной цене.
Выбрать курс

Курсы

Программирование
iOS Developer. Basic
-25%
Python Developer. Professional
-25%
Разработчик на Spring Framework
-25%
Golang Developer. Professional
-25%
Python Developer. Basic
-25%
iOS Developer. Professional
-25%
Highload Architect
-25%
JavaScript Developer. Basic
-25%
Kotlin Backend Developer
-25%
JavaScript Developer. Professional
-25%
Android Developer. Basic
-25%
Unity Game Developer. Basic
-25%
Разработчик C#
-25%
Программист С Web-разработчик на Python Алгоритмы и структуры данных Framework Laravel PostgreSQL Reverse-Engineering. Professional CI/CD Vue.js разработчик VOIP инженер Программист 1С Flutter Mobile Developer Супер - интенсив по Kubernetes Symfony Framework Advanced Fullstack JavaScript developer Супер-интенсив "Azure для разработчиков"
Инфраструктура
Мониторинг и логирование: Zabbix, Prometheus, ELK
-25%
DevOps практики и инструменты
-25%
Архитектор сетей
-25%
Инфраструктурная платформа на основе Kubernetes
-25%
Супер-интенсив «ELK»
-16%
Супер-интенсив «IaC Ansible»
-16%
Супер-интенсив "SQL для анализа данных"
-16%
Базы данных Сетевой инженер AWS для разработчиков Cloud Solution Architecture Разработчик голосовых ассистентов и чат-ботов Внедрение и работа в DevSecOps Администратор Linux. Виртуализация и кластеризация Нереляционные базы данных Супер-практикум по использованию и настройке GIT IoT-разработчик Супер-интенсив «СУБД в высоконагруженных системах»
Специализации Курсы в разработке Подготовительные курсы
+7 499 938-92-02

Webpack: настраиваем сборку приложения

JS_Deep_6.08_Site.png

Webpack – один из самых быстрых, мощных и гибких сборщиков. На сегодняшний день он обладает также уникальными возможностями. Сравнительно недавно вышла новая версия Webpack и в этой заметке я поделюсь с вами тем, как настроить сборку вашего приложения, а также расскажу про некоторые возможности Webpack.

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

module.exports = {
  mode: "production",
  entry: "./app/entry",
  output: {
    path: "./dist",
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: "babel-loader",
        options: {
          presets: ["es2015"]
        }
      }
    ]
  },
  resolve: {
    modules: [
      "node_modules",
      "./app"
    ],
    extensions: [".js", ".json", ".jsx", ".css"],
  },
  devServer: {
    proxy: {
      '/api': 'http://localhost:3000'
    }
  },
  plugins: [
    new HtmlWebpackPlugin()
  ]
}

Разберёмся:

Всё-таки мы в NodeJS окружении и так пишется export.

module.exports = {

Режим, в котором webpack собирает ваше приложение:

  mode: "production",

В зависимости от него включаются или выключаются различные features, например, минификация. Точка входа для сборки, обычно это index.js клиентской части:

  entry: "./app/index.js",

Собственно, результат работы webpack:

  output: {
    path: "./dist",
    filename: "bundle.js"
  },

Туда будет складываться, так называемый бандл (bundle) – результат объединения всех связанных JS, начиная с точки входа.

Помимо JS, туда будут генерироваться HTML и другие файлы, генерируемые плагинами.

Есть секция, где настраивается сам модуль – та часть приложения, которая собирается Webpack:

  module: {

В этой секции настраиваются правила обработки файлов и import-ов.

    rules: [

Webpack позволяет импортировать не только js-файлы, но и написанные на диалектах TypeScript, JSX, и даже позволяет импортировать картинки!

Вот как раз пример настройки loader-а – обработчика import-ов:

      {
        test: /\.jsx?$/,
        loader: "babel-loader",
        options: {
          presets: ["es2015"]
        }
      }

К файлам с данным расширением будет применяться babel-loader (babel) с набором плагинов (уже babel-а), называемых preset-ом, предназначенных для транспайлинга ES2015.

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

  resolve: {
    modules: [
      "node_modules",
      "./app"
    ],
    extensions: [".js", ".json", ".jsx", ".css"],
  },

Одна из прекрасных возможностей Webpack – дев-сервер в режиме проксирования:

  devServer: {
    proxy: {
      '/api': 'http://localhost:3000'
    }
  }

Если вы разрабатываете UI для сложного backend-а, то здесь вы можете указать адрес сервера и все запросы от вашего UI будут проксироваться на этот сервер!

Есть вопросы? Напишите в комментариях!

Не пропустите новые полезные статьи!

Спасибо за подписку!

Мы отправили вам письмо для подтверждения вашего email.
С уважением, OTUS!

Автор
3 комментария
0

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

0

Хорошо, но мало ). А загрузчик pdf как добавить корректно? достаточно приписать расширение к картинкам? (я так сделал)

Для комментирования необходимо авторизоваться
🎁 Максимальная скидка!
Черная пятница уже в OTUS! Скидка -25% на всё!