Как в webpack задать имена формируемых css файлов?

В Symfony проектах для сборки и компиляции фронтенд ресурсов, таких как JavaScript и CSS, часто используется инструмент webpack. При настройке сборки с помощью webpack можно задать имена формируемых CSS файлов несколькими способами.

1. **Использование entry points:** В конфигурации webpack можно определить точки входа (entry points), каждая из которых будет компилироваться в отдельный файл. Для каждой точки входа можно указать имя файла, используя плейсхолдер [name]. Например:

module.exports = {
  entry: {
    main: './src/main.js',
    styles: './src/styles.css'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  }
};

В этом примере, файл main.js будет скомпилирован в main.js, а файл styles.css - в styles.js. При необходимости, можно использовать также другие плейсхолдеры, такие как [hash], чтобы добавить хеш к имени файла для обновления кэша.

2. **Использование MiniCssExtractPlugin:** Для более гибкого управления именами CSS файлов можно использовать плагин MiniCssExtractPlugin. Этот плагин позволяет выделить CSS из файлов JavaScript и создает отдельные файлы CSS. Для задания определенных имен файлов можно использовать опцию filename. Например:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // ...
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css'
    })
  ]
};

В этом примере, каждый CSS файл будет иметь имя, соответствующее имени точки входа и хешу содержимого файла, чтобы обеспечить уникальность имени при изменении стиля.

3. **Использование HtmlWebpackPlugin в связке с MiniCssExtractPlugin:** Если вы используете также плагин HtmlWebpackPlugin для генерации HTML файлов, можно объединить его с плагином MiniCssExtractPlugin для автоматического добавления ссылок на сгенерированные CSS файлы в создаваемые HTML файлы. В этом случае можно использовать опцию hash, чтобы добавить хеш к имени CSS файла, который будет использоваться для кэширования. Например:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: '[name].[hash].css'
    })
  ]
};

Теперь, при компиляции проекта, MiniCssExtractPlugin автоматически создаст и подключит CSS файлы в HTML файлы, используя заданные имена.

В зависимости от ваших потребностей и конкретной конфигурации webpack, вы можете выбрать один из этих способов или комбинировать их для достижения нужного результата при задании имен формируемых CSS файлов.