Как настроить Webpack для начинающих

Начните писать здесь… Настройка Webpack для начинающих
Настройка webpack в первый раз может быть сложной с точки зрения того, где и как упорядочить ваши файлы в том порядке, который позволит webpack успешно объединить их в один основной файл.
теперь первым шагом является установка веб-пакета, вы можете сделать это с помощью командной строки и выполнив следующую команду
«npm install webpack», или, если вместо этого вы используете пряжу, «yarn add webpack»
теперь, после установки веб-пакета, вам нужно перейти в папку package.json, и если он был успешно установлен, вы увидите, например, что веб-пакет указывает на установленную версию; веб-пакет: «^ 4.39.3».
теперь следующий шаг — настроить сборку в файле package.json и настроить для просмотра. пример;

"scripts": {
"build": "webpack --watch"
}

затем следующим шагом является настройка файла конфигурации, это файл, который веб-пакет просматривает, чтобы узнать, какие файлы он компилирует, где они находятся, и файл, в который он объединяет все, вы идете в корень вашего приложения и настраиваете «webpack .config.js»
затем после создания файла вам нужно будет настроить его, выполнив следующее:
скажем, скрипт, который вы хотите, чтобы он читал данные, которые должны быть объединены, помещены в папку src и называется
‘примерScript.js’
и скрипт, в который вы хотите связать каждый код, находится в папке с именем bundle, и он называется
‘примерBundleScript.js’
мы запускаем следующую команду

const path = require('path');
module.exprots = {
    entry: ['./src/exampleScript.js'],
    output: {
        Path: path.resolve(__dirname, 'bundle'),
        filename: 'exampleBundleScript.js'
    }
};

Примечание. HTML-файл индекса необходимо поместить в ту же папку, что и пример папки bunndlescript.js, которая находится в папке пакета.
Теперь, когда все эти шаги выполнены, вы успешно настроили webpack.