Инструмент для сборки модулей в JavaScript

Давайте установим Webpack:

npm install --save-dev webpack

Установим также Webpack CLI:

npm install --save-dev webpack-cli

После создадим конфигурационный файл с именем webpack.config.js и следующим содержимым:

module.exports = {
	entry: './index.js',
	output: {
		filename: './bundle.js',
	}
};

Для удобного вызова Webpack в файл package.json добавим следующую настройку:

"scripts" : {
	"build" : "webpack"
}

После этого можно вызывать наш сборщик:

npm run build

После вызова этой команды произойдет следующее: сборщик возьмет файл index.js, посмотрит, какие модули подключены к этому файлу, и соберет весь код в один файл dist/bundle.js.

Затем нам нужно сделать HTML файл и подключить к нему результат сборки:

<html>
	<head>
		<script defer src="bundle.js"></script>
	</head>
	<body>
		...
	</body>
</html>

Следуя инструкции установите Webpack.

Сделайте файл index.js с каким-нибудь содержимым.

Выполните команду на сборку.

Создайте HTML файл. Подключите к нему собранный бандл. Запустите этот файл в браузере.

Поменяйте содержимое файла index.js, заново выполните сборку, заново запустите HTML файл в браузере и проверьте, что ваши изменения применились.