Webpack 4 — модульный бандлер, позволяющий создавать бандлы без конфигурационных файлов. Для начала достаточно установить Webpack и запустить его.
Подготовка проекта
- Создайте директорию проекта: cd Desktop && mkdir my-webpack && cd my-webpack.
- Создайте файл package.json: npm init -y.
- Откройте проект в Visual Studio Code: code .
Создание файлов проекта
В корне проекта создайте файл index.html:
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>Создайте папку src и в ней файлы: index.js и greeting.js.
index.js:
console.log('Hello world');greeting.js:
const greet = (name) => `Hello ${name}`;Подключение JavaScript файлов и проблема загрузки
Добавьте ссылки на index.js и greeting.js в index.html внутри тега <body> с помощью тегов <script>:
<script src="src/greeting.js"></script>
<script src="src/index.js"></script>В консоли разработчика вы увидите «Hello world». Однако, попытка использовать функцию greet из greeting.js в index.js (например, console.log(greet(‘Bob’));) приведёт к ошибке greet is not defined из-за порядка загрузки скриптов.
Модули ES6 и Webpack
Для решения проблемы используйте модули ES6. В greeting.js добавьте export default greet;, а в index.js — import greet from ‘./greeting’;. Удалите из index.html <script src=»src/greeting.js»>, так как импорт теперь происходит через index.js.
После обновления страницы вы получите ошибку SyntaxError: Unexpected identifier, поскольку браузеры не поддерживают импорт ES6 модулей без предварительной обработки. Решение — использовать Webpack.
Установка и использование Webpack
- Установите Webpack: npm install webpack —save-dev.
- Добавьте скрипт build в package.json: "build": "webpack".
- Установите webpack-cli: npm install webpack-cli —save-dev.
- Запустите сборку: npm run build.
Webpack создаст папку dist и файл main.js. Замените в index.html src/index.js на dist/main.js. После обновления страницы вы увидите «Hello world» и «Hello Bob».
Режимы работы Webpack
Webpack по умолчанию работает в режиме production. Для режима development добавьте флаг —mode development в скрипт build: "build": "webpack —mode development". После повторной сборки и обновления страницы вы увидите увеличенный размер бандла и более подробную информацию о модулях в консоли разработчика.
В этом уроке показано, как использовать Webpack 4 для создания бандла JavaScript файлов без конфигурационного файла. Webpack автоматически ищет index.js в папке src и создаёт бандл main.js в папке dist. Флаг —mode позволяет выбирать между режимами production и development. Необходимо подключать созданный бандл в index.html.