Как WebPack решает какие файлы можно обработать?

Как WebPack решает какие файлы можно обработать?

Webpack использует loaders и rules для определения, как обрабатывать разные типы файлов. Webpack не знает по умолчанию, как работать с CSS, изображениями, TypeScript и другими не-JavaScript файлами. Это определяется конфигурацией через расширения файлов (extensions) и правила (rules).

Основная идея

Webpack обрабатывает все файлы в проекте. Когда он встречает файл, он:

1. Проверяет расширение файла (.js, .css, .png, .ts и т.д.)
2. Ищет подходящее правило (rule) в webpack.config.js
3. Применяет соответствующий loader для преобразования файла
4. Включает результат в бандл

Структура webpack.config.js

module.exports = {
  entry: './src/index.js', // Точка входа
  output: {
    filename: 'bundle.js', // Выходной файл
    path: path.resolve(__dirname, 'dist')
  },
  
  module: {
    rules: [
      // Правила для разных типов файлов
      {
        test: /\.js$/,           // Regex: какие файлы обрабатывать
        exclude: /node_modules/, // Исключить эти папки
        use: {
          loader: 'babel-loader' // Какой loader использовать
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|jpg|gif)$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024 // 8kb
          }
        }
      }
    ]
  }
};

Как работает test (регулярное выражение)

Параметр test — это регулярное выражение, которое определяет файлы:

module.exports = {
  module: {
    rules: [
      // Правило 1: обработать все .js файлы
      {
        test: /\.js$/,          // Регулярное выражение
        use: 'babel-loader'
        // Подходит: main.js, index.js, utils.js
        // Не подходит: main.css, image.png
      },
      
      // Правило 2: обработать все файлы TypeScript
      {
        test: /\.ts$/,
        use: 'ts-loader'
        // Подходит: main.ts, types.ts
      },
      
      // Правило 3: обработать CSS и SCSS
      {
        test: /\.(css|scss)$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
        // Подходит: styles.css, theme.scss
      },
      
      // Правило 4: обработать изображения
      {
        test: /\.(png|jpg|jpeg|gif|svg)$/i,
        type: 'asset/resource'
        // Подходит: logo.png, icon.svg
      }
    ]
  }
};

Примеры регулярных выражений

// Файлы с расширением .js
test: /\.js$/       // main.js, index.js

// Файлы с расширением .js или .jsx
test: /\.jsx?$/     // main.js, main.jsx

// Файлы с расширением .ts или .tsx
test: /\.tsx?$/     // main.ts, main.tsx

// Изображения
test: /\.(png|jpg|gif)$/i  // logo.png, image.jpg (i = case insensitive)

// Шрифты
test: /\.(woff|woff2|eot|ttf|otf)$/

// JSON
test: /\.json$/     // config.json

// Все файлы
test: /.*/ 

Порядок обработки (важно!)

Webpack проходит по rules в порядке их определения. Первое подходящее правило применяется:

module.exports = {
  module: {
    rules: [
      // Правило 1
      {
        test: /\.js$/,
        use: 'babel-loader'
      },
      
      // Правило 2
      {
        test: /\.js$/,
        use: 'ts-loader'
      }
    ]
  }
};

// Результат: для .js файлов будет применен babel-loader
// (второе правило никогда не будет использоваться)

Для обработки одного типа файлов несколькими loaders используется параметр use (применяется справа налево):

{
  test: /\.css$/,
  use: ['style-loader', 'css-loader', 'postcss-loader']
  // Порядок выполнения: postcss-loader -> css-loader -> style-loader
}

Исключение файлов (exclude и include)

{
  test: /\.js$/,
  exclude: /node_modules/,  // Пропустить файлы в node_modules
  use: 'babel-loader'
  // Обработает: src/index.js, src/utils.js
  // Не обработает: node_modules/lodash/index.js
}

{
  test: /\.js$/,
  include: /src/,  // Обработать только файлы в src
  use: 'babel-loader'
  // Обработает: src/index.js, src/utils.js
  // Не обработает: test/utils.js
}

Пример полной конфигурации

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  
  module: {
    rules: [
      // JavaScript и TypeScript
      {
        test: /\.(js|ts)x?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react', '@babel/preset-typescript']
          }
        }
      },
      
      // CSS
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      
      // Изображения (маленькие встраивать в CSS, большие как файлы)
      {
        test: /\.(png|jpg|gif|svg)$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024 // 8kb
          }
        }
      },
      
      // Шрифты
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        type: 'asset/resource'
      },
      
      // JSON (встроен по умолчанию)
      {
        test: /\.json$/,
        type: 'json'
      }
    ]
  }
};

Как Webpack находит файлы

Webpack не проверяет все файлы в проекте. Он начинает с entry point и следует импортам:

// index.js (точка входа)
import './styles.css';        // Webpack: найди styles.css
import Button from './Button.js'; // Webpack: найди Button.js

// Button.js
import icon from './icon.png'; // Webpack: найди icon.png

// icon.png
// Конец цепочки

Webpack обработает только файлы, которые импортированы из entry point.

Примеры обработки разных типов

// 1. JavaScript
// input: src/index.js
// loader: babel-loader
// output: преобразованный JavaScript (с поддержкой новых синтаксисов)

// 2. CSS
// input: src/styles.css
// loaders: css-loader -> style-loader
// output: JavaScript код, который инъектирует CSS в <head>

// 3. Изображения (маленькие)
// input: src/logo.png (5kb)
// type: asset
// output: встроено как base64 в JavaScript бандл

// 4. Изображения (большие)
// input: src/background.png (200kb)
// type: asset
// output: отдельный файл в dist/

// 5. TypeScript
// input: src/main.ts
// loader: ts-loader
// output: JavaScript код (TypeScript преобразован)

Resolve (поиск файлов)

Webpack может расширять расширения файлов автоматически:

module.exports = {
  resolve: {
    extensions: ['.js', '.ts', '.tsx', '.json']
    // import Button from './Button'
    // Webpack ищет: Button.js, Button.ts, Button.tsx, Button.json
  }
};

Итоги

• Webpack использует rules с test (регулярное выражение) для определения типа файла
• Каждому типу файла соответствует loader, который его преобразует
• Регулярные выражения вроде /\.js$/ проверяют расширение файла
• Порядок правил важен — первое подходящее применяется
• Исключения (exclude/include) уточняют, какие файлы обрабатывать
• Webpack начинает с entry point и следует импортам (не сканирует весь проект)
• Один файл может обрабатываться несколькими loaders в цепочке
• Это позволяет Webpack работать с любыми типами файлов, не только JavaScript