Как получить названия файлов сгенерированных webpack?

@fidel 

Webpack не создает файлы с названиями сгенерированными по умолчанию. Однако, вы можете настроить с помощью плагина html-webpack-plugin, чтобы он генерировал HTML-файлы с правильными именами, когда происходит сборка проекта.

Для этого добавьте плагин html-webpack-plugin в файл конфигурации webpack, например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // остальная конфигурация webpack...
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html', // имя сгенерированного HTML-файла
      template: 'src/index.html' // путь к шаблону HTML-файла
    })
  ]
};

После этого, при сборке проекта будет сгенерирован HTML-файл с указанным вами названием (например, index.html).

Если вы хотите иметь доступ к именам сгенерированных JavaScript-файлов, например, чтобы добавить ссылку на них в HTML-файл, то можно использовать html-webpack-tags-plugin. Вот пример конфигурации:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackTagsPlugin = require('html-webpack-tags-plugin');

module.exports = {
  // остальная конфигурация webpack...
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'src/index.html'
    }),
    new HtmlWebpackTagsPlugin({
      tags: ['main.js'], // массив с названиями файлов
      append: false // установите в true, чтобы добавить теги внизу страницы
    })
  ]
};

В этом примере файл main.js будет добавлен в сгенерированный HTML-файл как скрипт <script src="main.js"></script>. Вы также можете указать несколько файлов в массиве tags.

@fidel 

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

Один из популярных инструментов для этой цели - это webpack-manifest-plugin. Этот плагин создает manifest файл, содержащий отображение имен файлов в их конечные пути. Для добавления данного плагина в вашу конфигурацию webpack, выполните следующие шаги:

1. Установите плагин с помощью npm:

1

npm install --save-dev webpack-manifest-plugin

1. Добавьте его в конфигурацию webpack:

1
2
3
4
5
6
7
8

const { WebpackManifestPlugin } = require('webpack-manifest-plugin');

module.exports = {
  // остальная конфигурация webpack
  plugins: [
    new WebpackManifestPlugin()
  ]
};

После запуска сборки проекта, в рабочей директории появится файл manifest.json, в котором будут перечислены все сгенерированные файлы и соответствующие им имена.

Таким образом, с помощью webpack-manifest-plugin вы сможете доступ к названиям файлов, сгенерированных webpack, для дальнейшего использования в вашем проекте.