Настраиваем Webpack с нуля для css и js. Два варианта
Давайте создадим полную конфигурацию Webpack с нуля для проекта, в котором используются SCSS-стили. Мы начнем с создания проекта, установки зависимостей и настройки.
Создайте новый проект и перейдите в его каталог:
mkdir webpack-scss-example
cd webpack-scss-example
Инициализируйте проект с помощью npm init и следуйте инструкциям:
npm init -y
Установите Webpack и Webpack CLI:
npm install webpack webpack-cli --save-dev
Установите необходимые зависимости для работы с SCSS:
npm install sass-loader sass css-loader style-loader --save-dev
Создайте файл конфигурации Webpack
Создайте файл webpack.config.js в корневом каталоге вашего проекта и добавьте следующий код:
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.(scss|css)$/,
use: [
'style-loader', // 3. Инжектит стили в DOM
'css-loader', // 2. Преобразует CSS в CommonJS
'sass-loader' // 1. Компилирует SCSS в CSS
],
},
],
},
};
Создайте каталог src в корневом каталоге вашего проекта и добавьте файл index.js:
mkdir src
touch src/index.js
В файле src/index.js импортируйте SCSS-файл:
import './styles.scss';
Создайте SCSS-файл styles.scss в каталоге src:
touch src/styles.scss
Добавьте некоторые стили в файл src/styles.scss:
body {
background-color: lightblue;
font-family: Arial, sans-serif;
}
Добавьте скрипт сборки в файл package.json:
{
// ...другие поля...
"scripts": {
"build": "webpack"
}
}
Запустите сборку проекта:
npm run build
После выполнения этой команды в каталоге dist будет создан файл bundle.js, который содержит скомпилированные стили и JavaScript-код. Вы можете подключить этот файл к HTML-странице и увидеть, что стили применяются корректно.
Отдельный css файл
В предыдущем примере стили были инжектированы непосредственно в DOM через тег <style>, поскольку использовался style-loader. Если вам нужен отдельный CSS-файл после компиляции SCSS, вам следует использовать mini-css-extract-plugin.
Давайте обновим наш пример:
Установите mini-css-extract-plugin:
npm install mini-css-extract-plugin --save-dev
Импортируйте плагин в webpack.config.js и обновите конфигурацию
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.(scss|css)$/,
use: [
MiniCssExtractPlugin.loader, // Извлекает CSS в отдельный файл
'css-loader', // Преобразует CSS в CommonJS
'sass-loader' // Компилирует SCSS в CSS
],
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: 'styles.css',
}),
],
};
Теперь при сборке проекта с помощью npm run build, CSS-стили будут извлекаться в отдельный файл styles.css в каталоге dist. Вам нужно будет вручную подключить этот файл к вашей HTML-странице.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webpack SCSS Example</title>
<link rel="stylesheet" href="./dist/styles.css">
</head>
<body>
<h1>Hello, Webpack!</h1>
<script src="./dist/bundle.js"></script>
</body>
</html>
Таким образом, скомпилированный CSS-файл будет доступен в каталоге dist, и вы сможете использовать его независимо от JavaScript-кода.