главная/Настраиваем Webpack с нуля для css и js. Два варианта

07.04.2023

Уроки

Настраиваем 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-кода.

css

zalki-lab блог веб разработчика