Мы рассмотрим базовую настройку Webpack для вашего приложения JavaScript. Иногда Webpack может быть головной болью при настройке, и многие люди могут пропустить его настройку и выбрать уже созданные шаблоны, для которых уже все уже настроено.
Итак, давайте познакомимся с базовым пониманием того, как работает Webpack, как его настроить и что он может сделать для нас как разработчиков. Начнем с создания пустого проекта в нашем терминале.
mkdir javascript-webpack-setup
Перейдите во вновь созданный пустой проект.
cd javascript-webpack-setup
Давайте откроем проект в нашем любимом редакторе кода. Для этой настройки я использую код Visual Studio.
В терминале давайте перейдем в корень нашего проекта и создадим файл package.json для проекта, выполнив следующую команду.
npm init -y
Это наш файл package.json.
Вернемся к терминалу, давайте продолжим и установим веб-пакет, выполнив команду ниже.
npm install --save-dev webpack webpack-cli
Папка нашего проекта теперь содержит файл package-lock.json и папку node_modules. Создайте файл webpack.config.js в папке нашего проекта и добавьте самую базовую конфигурацию.
webpack.config.js включает точку входа, которая представляет собой файл JavaScript, из которого будет считываться webpack. Точка вывода — это место, где webpack будет объединять все файлы проекта JavaScript, помещая их в указанную папку и файл.
Создайте папку src и добавьте в нее файл index.js. В index.js добавьте простой скрипт, как показано ниже.
В подскриптах package.json добавьте "build": "webpack", как показано ниже.
Теперь мы продолжим и запустим npm run build в терминале.
Когда мы проверяем наш недавно созданный bundle.js , мы видим, что наш код был упакован внутри папки dist.
Мы можем избавиться от предупреждения режима конфигурации, добавив mode: "development", в webpack.config.js, как показано ниже.
Наш следующий шаг — добавить файл .html с помощью плагина html webpack, и мы собираемся установить его, запустив npm i --save-dev html-webpack-plugin в терминале.
В файле webpack.config.js импортируйте подключаемый модуль html, добавив const HtmlWebpackPlugin = require('html-webpack-plugin'); и new HtmlWebpackPlugin() в разделе подключаемые модули. Таким образом, наш файл становится таким, как показано ниже.
Запустим в терминале npm run build и увидим, что файл index.html создан в папке dist.
С этой настройкой каждый раз, когда мы вносим изменения в файл, будет необходимо запускать npm run build каждый раз. Поэтому нам нужно будет установить плагин webpack-dev-server, чтобы снять с себя часть этого разочарования.
В терминале запустим npm install webpack-dev-server --save-dev. Это помогает нам перезагружать наш index.html каждый раз при обнаружении изменений. В package.json под скриптами добавить "start": "webpack-dev-server".
В webpack.config.js добавьте devServer: { open: true }, как показано ниже.
Запустите npm run start в терминале. Что происходит, так это то, что когда вы пытаетесь внести изменения в файлы .js, браузер загружает их в режиме реального времени при их сохранении.
Пришло время добавить в проект HTML-шаблон с помощью HtmlWebpackPlugin в webpack.config.js, как показано ниже.
Создайте template.html внутри папки src.
Когда мы запускаем npm run build, мы видим, что webpack получает код template.html и внедряет его в index.html в папке dist.
Чтобы сохранить нашу папку dist в чистоте, мы должны установить подключаемый модуль clean-webpack, который удалит все ненужные файлы. Запустите npm install --save-dev clean-webpack-plugin в терминале.
В файле webpack.config.js мы должны импортировать плагин, добавив const { CleanWebpackPlugin } = require('clean-webpack-plugin); и new CleanWebpackPlugin() в наш список плагинов, как показано ниже.
Наш последний шаг — загрузить CSS в наш проект. Нам нужно будет добавить css-loader и style-loader. Давайте запустим следующие команды, чтобы установить их.
npm install --save-dev css-loader npm install --save-dev style-loader
В webpack.config.js давайте добавим ключ модуля, как показано ниже.
Наконец, нам нужно создать файл style.css в папке src и импортировать файл CSS в наш файл JavaScript.
В случае каких-либо ошибок перезапустите сервер с npm run start и пересоберите проект с npm run build.
Итак, это базовая конфигурация и начальный шаблон для любого проекта JavaScript, и, надеюсь, это поможет вам начать работу с webpack.
