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

Пользователь

от fidel , в категории: JavaScript , 10 месяцев назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от krista , 10 месяцев назад

@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.