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

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 будут проксироваться на этот сервер!

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