Для начала установим webpack, делается это с помощью команд:

yarn add webpack webpack-cli -D, если используете менеджер пакетов yarn
npm i webpack webpack-cli --save-dev, для менеджера пакетов npm

Настраивается Webpack с помощью конфигурационного файла webpack.config.js, который хранится в корневой директории проекта.

Пример конфигурационного файла:

const path = require('path')
module.exports = {
   watch: true,
   entry: "./src/index.js",
   output: {
       filename: "bundle.js",
       path: path.resolve(__dirname,'build'),
       publicPath: "/"
   }
};

Начальная конфигурация представляет собой следующее:

watch — заставляет webpack отслеживать изменения в файлах и заново выполнять сборку;
entry — Указывает на точку входа в проект, и откуда нужно начать построение графа внутренних зависимостей проекта;
output — Указывает путь, где будет располагаться создаваемый файл и как он будет называться;

Так же необходимо установить webpack-dev-server, который понадобится для разработки и отладки приложения.

yarn add webpack-dev-server для менеджера пакетов yarn или
npm i webpack-dev-server если используется npm

Для настройки webpack-dev-server добавим devServer в нашем конфигурационном файле.

Параметры для webpack-dev-server:

module.exports = {
    //...
    devServer: {
        port: 8000,
        historyApiFallback: true,
        hot: true,
    },
};

Также нам нужно добавить/заменить в нашем package.json файле скрипт запуска проекта:

"start": "webpack-dev-server --mode development",

и скрипт для сборки билда:

"build": "webpack --mode production"

Загрузчики

Загрузчики (loaders) — это специальные модули, которые используются для «загрузки» других модулей. Так же они позволяют предварительно обрабатывать файлы по мере их импорта или «загрузки».

Загрузчики могут преобразовывать файлы, например TypeScript в JavaScript, sass в css. Они могут даже позволить нам делать такие вещи, как импорт файлов CSS и HTML непосредственно в наши модули JavaScript. Для их использования необходимо прописать нужные загрузчики в разделе module.rules файла конфигурации.

Примеры загрузчиков:

babel-loader — использует babel для загрузки файлов ES2015.
file-loader — для загрузки различных файлов (изображения, музыкальные дорожки и т.д.) в выходную директорию
style-loader — используется для загрузки стилей
css-loader — включает загрузку файлов стилей
@svgr/webpack — лоадер, позволяющий использовать svg изображения как jsx элементы

Для использования babel-loader необходимо установить babel/core. Также установим пресет babel/preset-env, который компилирует ES2015+ в ES5 путем автоматического определения необходимых Babel плагинов и полифайлов. Далее создадим файл .babelrc и в него добавим ранее установленный пресет.

{
 "presets": [
   "@babel/preset-env"
 ]
}

Теперь добавим загрузчик в нашу конфигурацию для преобразования файлов Javascript. Это позволит нам использовать синтаксис ES2015 + в нашем коде (который будет автоматически конвертироваться в ES5 в окончательной сборке).

{
   test: /\.(js|jsx)$/,
   exclude: /node_modules/,
   use: {
       loader: 'babel-loader',
   },
},

Пример конфигурации с лоадером file-loader

{
   test: /\.(png|jpe?g|gif)$/i,
   use: [
       {
           loader: 'file-loader',
       },
   ],
},

Пример конфигурации для лоадера @svgr/webpack

{
   test : /\.(svg)$/,
   use: [
       {
           loader: "@svgr/webpack"
       }
   ]
}

Плагины

Плагины являются основой webpack, так как по сути вся его работа построена на системе плагинов. Они значительно расширяют возможности загрузчиков.

Загрузчики выполняют предварительную обработку файлов любого формата. Они работают на уровне отдельных файлов во время или до создания пакета. После того как отработают загрузчики наступает очередь плагинов. Плагины как правило отрабатывают только одну функцию.

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

Примеры плагинов:

html-webpack-plugin — используется для создания html файлов
copy-webpack-plugin — копирует отдельные файлы или целые каталоги, которые уже существуют, в каталог сборки.
definePlugin — позволяет создавать глобальные константы
HotModuleReplacementPlugin — включает HMR режим, обновляет только ту часть, которая изменилась, не перезагружая полностью приложение.

Пример конфигурации с добавленными плагинами:

plugins: [
   new webpack.HotModuleReplacementPlugin(),
   new webpack.DefinePlugin({
       'process.env': JSON.stringify(process.env),
   }),
   new HtmlWebpackPlugin({
       template: "./public/index.html",
   }),
   new CopyWebpackPlugin({
       patterns: [
           { from: './public/favicon.ico', to: './public'}
       ]
   }),
],

Также добавим плагин UglifyjsWebpackPlugin, который минимизирует js код, для этого нужно установить uglifyjs-webpack-plugin и добавить его в разделе optimization

optimization: {
   minimizer: [new UglifyJsPlugin()]
},

Основы настройки Webpack