Как собрать картинки в ejs + webpack?

Для сборки картинок в проекте на ejs с использованием webpack вам потребуется несколько шагов.

1. Установите необходимые зависимости:

npm install --save-dev file-loader html-loader

file-loader позволяет импортировать файлы, включая изображения, в ваш код, а html-loader позволяет обрабатывать вставки изображений в ejs шаблоны.

2. Настройте webpack для обработки изображений. Добавьте правило для file-loader в ваш файл конфигурации webpack (например, webpack.config.js). Это правило будет говорить webpack, как обрабатывать изображения при сборке проекта:

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /.(png|jpg|gif|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'images',
              publicPath: 'images',
            },
          },
        ],
      },
      // ...
    ],
  },
  // ...
};

В данном примере мы указываем, что все файлы с расширениями png, jpg, gif и svg будут обрабатываться file-loader. Опции outputPath указывает путь, по которому будут сохранены собранные файлы изображений, а publicPath указывает путь доступа к ним относительно собранного проекта.

3. В вашем ejs шаблоне, где вы хотите вставить изображение, используйте специальную синтаксическую конструкцию <%= require() %>, чтобы импортировать изображение. Например:

<img src="<%= require('./images/my-image.png') %>" alt="Моё изображение">

Приведенный выше пример показывает, как можно использовать require() для импорта изображения и вставки его пути в атрибут src тега <img>.

4. Запустите сборку проекта с использованием webpack. После сборки, webpack обработает ваши ejs шаблоны, найдет все вставки изображений и заменит их на правильные пути к собранным файлам изображений.

Теперь вы можете собрать ваш проект, и все изображения будут собраны и вставлены в ваши ejs шаблоны автоматически, соответствующим образом настроенными путями.