Так много раз слышал от Dev, что они не понимают, как настроить WebPack из -за файла конфигурации. Сегодня мы узнаем, как использовать WebPack для настройки стилей пакетов, JavaScript, изображений и шрифтов для Интернета.
В первый раз, когда использует Webpack, будет крутится много вопросов, может быть трудно понять, как он работает и как его следует использовать. Моя цель – помочь вам понять WebPack.
Давайте погрузимся в инициализацию WebPack.
Что такое WebPack 5?
Короче, WebPack является статическим модулем для современных приложений JavaScript. Невозможно упомянуть все инструменты, и это ненужно для такого руководства для начинающих.
Вместо этого я постараюсь поместить небольшой основной список, чтобы начать.
Основная конфигурация
- Точка входа
- Выход
Погрузчики
- Стили
- Картинки
- Шрифты
- Вавилон (JavaScript)
Плагины
- HTML шаблон
Режим
- Разработка
Начало работы с базовой конфигурацией WebPack
Во -первых, создайте каталог для вашего проекта, чтобы жить и начать проект. Там, прежде чем мы начнем с создания следующей структуры каталога:
1. Создать проект
mkdir webpack-setup cd webpack- setup npm init -y # creates a default package.json
2. Установка WebPack
npm install webpack webpack-cli –-save-dev
Мы сделаем папку SRC/App для содержания всех исходных файлов. Я начну с создания простого файла index.js
3. Основная конфигурация
Давайте создадим webpack.config.js в корне проекта. Touch webpack.config.js
4. Вход и выход
В этом примере мы установим точку входа в src/index.js. У нас будет выходы в папке Dist, где создается производственный код. [Имя] в выводе будет главным.
5. Создайте WebPack
Чтобы запустить сценарий, мы можем сделать сценарий сборки, который запускает команду WebPack.
6. Теперь вы можете запустить его.
npm run build
Dist Polder была создана с помощью main.bundle.js.
Итак, теперь у нас есть строительство WebPack успешно.
Мы начнем с Погрузчики В нашем примере
1. Стили
Для стиля мы установим стиль погрузчика и SCSS, PostCSS, пакеты CSS Loader.
- нахальный нагрузчик-для SCSS и CSS Compile
- Узел-SASS-для узлов нахмель
- PostCSS -Loader – процесс CSS с PostCSS
- CSS-Loader-Resolve CSS-импорт
- Стиль-загрузчик-инъекция CSS в DOM
npm i sass-loader postcss-loader css-loader style-loader postcss-preset-env node-sass --save-dev
Мы сделаем файл postcss.config.js и добавим его в корень.
Кроме того, добавьте все загрузки в файл конфигурации WebPack.
Забегайте, чтобы построить, вы увидите, что SASS и PostCS были применены.
2. Картинки
Создайте SRC/изображения и добавьте в него изображение, затем попробуйте импортировать его в свой файл index.js.
После загрузки файлового загрузчика, настроенного на webpack.config.js
npm i file-loader --save-dev
Вы получите опцию для выходных файлов, где мы хотим точный путь (Dist/Assets/Images/**. JPG).
3. Шрифты
Во -первых, поместите файлы шрифтов в одну папку приложения вашего проекта.
Необходимо загрузить URL-загрузчик для функций.
npm i --save-dev url-loader
4. JavaScript
Мы используем Вабел-загрузчик для JS. Вавилон-JavaScript следующего поколения. Есть несколько дополнительных зависимостей и для Вавилона.
- Babel -Loader – транспилированные файлы с WebPack.
- @Babel/Core – Загрузка совместимого JavaScript
- @Babel/Preset-env – Умные дефолты для Вавилона
- @Babel/Plagin-Proposal-Class-Properties – Пользовательская конфигурация Babel
npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-env @babel/plugin-proposal-class-properties
Теперь мы добавим код для загрузки JS в webpack.config.js.
Мы создаем файл .babelrc в корне проекта для плагинов Babel.
Запустите NPM Build, весь код набор без какой -либо ошибки.
npm run build
5. Плагины для HTML
Как настройка WebPack для генерации HTML с Htmlwebpackplugin который создает файл из шаблона. Сначала установите плагин.
npm install html-webpack-plugin --save-dev
Создайте файл Template.html в папке SRC. Мы можем передать хеш конфигурации ‘ Название «Варианты HTML-Webpack-Plugin. А также добавьте код в файл конфигурации WebPack для создания HTML Теперь запустите сборку снова. Смотрите папку Dist теперь содержит index.html с пакетом.
6. Режим разработки
Чтобы настроить для разработки, мы установим Webpack-dev-server Анкет WebPack дает нам возможность легко установить сервер с помощью Live Перезагрузка.
- Webpack-dev-server – Сервер разработки для WebPack
npm install --save-dev webpack-dev-server
Снова добавьте строку Режим: 'разработка' в файл webpack.config.js. и для запуска сервера добавить скрипт в package.json:
npm start
При запуске этой команды ссылка на Localhost: 8080 автоматически появляется в вашем браузере
Этого будет достаточно, чтобы заставить вас начать с WebPack! Мы рассмотрели все (базовые, плагины, погрузчики) основных концепций веб -пакета. Для дальнейшего изучения возможностей WebPack мы рекомендуем официальные документы WebPack
Надеюсь, вам понравится, ребята, мы заканчиваем нашу базовую настройку WebPack! Большое спасибо за чтение пост.
Я работаю над проектом пользовательского интерфейса DASH, который основан на Gulp JS. Dash UI
Счастливого кодирования:)
Оригинал: “https://dev.to/anitaparmar26/webpack-5-guide-for-beginners-314c”