Как обрабатываются CSS и JavaScript файлы?

Обработка CSS и JavaScript в Webpack

Webpack — это модульный сборщик, который обрабатывает все файлы проекта как модули. Для обработки CSS и JavaScript используются специальные загрузчики (loaders), которые преобразуют файлы перед добавлением в итоговый бандл.

Обработка CSS

Для CSS используются два основных загрузчика: css-loader и style-loader. css-loader интерпретирует @import и url() в CSS, превращая его в JavaScript модуль. style-loader затем внедряет эти стили в DOM через тег <style>. Альтернативно, можно использовать MiniCssExtractPlugin для извлечения CSS в отдельные файлы.

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

Обработка JavaScript

Для JavaScript часто используется babel-loader, который транспилирует современный ES6+ код в ES5 для совместимости с браузерами. Babel использует пресеты, такие как @babel/preset-env, для определения необходимых преобразований.

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

Эти загрузчики работают последовательно: Webpack применяет их в порядке справа налево (снизу вверх в массиве). Для CSS сначала применяется css-loader, затем style-loader. Для JavaScript — babel-loader.

Вывод: Использование загрузчиков Webpack позволяет автоматизировать обработку CSS и JavaScript, обеспечивая совместимость и оптимизацию кода для продакшена.