Webpack - это сборщик модулей. Webpack может позаботиться об объединении вместе с отдельным средством выполнения задач. Однако грань между сборщиком и исполнителем задач стала размытой благодаря плагинам для веб-пакетов, разработанным сообществом. Иногда эти плагины используются для выполнения задач, которые обычно выполняются вне веб-пакета, таких как очистка каталога сборки или развертывание сборки.
Webpack из коробки поддерживает форматы модулей ES2015, CommonJS и AMD. Механизм загрузчика работает и для CSS, с поддержкой @import и url () через css-loader.
Выполните следующие шаги, чтобы инициализировать webpack в проекте: 1. Запустите следующую команду в терминал:
1. Выполните следующую команду в терминале:
$ npm init -y // it will create package.json into project root
2. Установите Webpack:
$ npm install --save webpack
3. В package.json внутри тега скрипта:
"scripts": { "start" : "webpack" }
Как только мы запустим npm start в терминал.
Сначала он будет искать конфигурацию. Если в проекте нет конфигурации, он будет искать index.js
в src. Если не будет и index.js
, то он выдаст ошибку:
ОШИБКА в модуле ввода не найдена: ошибка: не удается разрешить "./src" в пути к папке
Чтобы устранить ошибку, создайте index.js в корневом каталоге.
index.js:
alert("hello webpack");
Теперь запустите $ npm start.
Он выполнит код и автоматически сгенерирует папку dist. Внутри dist будет файл main.js, который включает код (webpack и index.js).
Но код не будет выполнен, пока мы не импортируем папку dist в index.html
.
index.html:
<script src="/dist/main.js" ></script>
ПРИМЕЧАНИЕ: чтобы иметь загрузчик или любой плагин, нам нужен файл конфигурации.
Создайте webpack.config.js в корневом проекте:
webpack.config.js:
module.exports =
{
mode : "development",
entry: "./src/index.js",
output:
{
// the first thing we can configure is file name
filename: "hello.js",
// where to do , where to actually split the code
// Import path from module which comes with node called path
// path.resolve(__dirname,..) : It mainly resolve absolute path to the New_folder_name directory. Wherever the current directory is. e.x. in my lappy: /Users/Projects/ Work/webpack-work // "dist" name of the folder where we want to code be going path: path.resolve(__dirname, "New_folder_name") } }
}
}
Погрузчики:
Загрузчики здесь - волшебная часть для загрузки файлов разных типов, кроме JS. Мы устанавливаем разные пакеты, и они определяют способ предварительной обработки определенного файла. Здесь мы можем обрабатывать файл CSS одним способом, мы можем обрабатывать файл SVG другим способом.
загрузчик стилей и загрузчик CSS
Сначала установите оба загрузчика:
$ npm install —save-dev style-loader css-loader
webpack.config.js:
module.exports =
{
mode : "development",
entry: "./src/index.js",
output:
{
filename: "hello.js" ,
path.resolve(__dirname, "New_folder_name") } }
},
module:
{
rules: [
{
// files which ends with .css use the below loader
test: /\.css$/, use: ["css-loader"]
}
]
}
}
Запустите npm start:
мы видим, что это есть в файле hello.js, который был создан через webpack внутри папки dist. Но этот стиль не был применен в DOM, хотя код включен. Вот где появляется загрузчик стилей.
Загрузчик CSS превращает ваш CSS в JS
Загрузчик стилей берет ваш Javascript, который на самом деле является css, и внедряет его в DOM.
Помещая оба загрузчика в конфиг, нам нужно понимать, какой из них будет первым. Поскольку загрузчик CSS будет компилировать CSS в JS с помощью загрузчика CSS и внедрять в DOM с помощью загрузчика стилей.
Примечание. На самом деле он загружается в обратном порядке, поэтому необходимо сначала поставить загрузчик стилей, а затем загрузчик CSS.
use: ["style-loader", "css-loader"]
SASS:
Sass - самый зрелый, стабильный и мощный язык расширений CSS профессионального уровня в мире.
В config мы будем использовать sass-loader, который компилирует код в css. Затем мы берем css и превращаем его в JS, а затем берем JS и превращаем его в DOM.
Здесь нам понадобится загрузчик SASS и узел SASS.
Установить:
$ npm install —save-dev sass-loader node-sass
webpack.config.js:
module.exports =
{
mode : "development"
entry: "./src/index.js",
output:
{
filename: "hello.js",
path.resolve(__dirname, "New_folder_name") } }
},
module:
{
rules: [
{
// files which ends with .css use the below loader
test: /\.scss$/,
use: [
"style-loader", // 3rd. style loader inject styles into DOM
"css-loader", // 2nd. CSS loader turns css into common JS
"sass-loader" //1st. SASS loader which turns sass into CSS
}
]
}
}
Спасибо, что прочитали эту статью. ♥ ️
В этом разделе мы узнали, как настроить веб-пакет и загрузчики.
В следующем разделе мы обсудим следующие темы: очистка кеша и плагины, разделение разработки и производства.
Надеюсь, этот блог был вам полезен. Если у вас возникнут вопросы, напишите мне на @suprabhasupi 😋
🌟 Twitter | 👩🏻💻 suprabha.me