Как использовать webpack для concat html?

Например, у меня есть основной файл html записи:

<div>
   <!-- I'd like to include a html partial here -->
</div>

И у меня есть частичный html

<span>I'm a partial html piece</span>

Я надеюсь, что я могу использовать webpack для создания окончательного html, как показано ниже:

<div>
  <span>I'm a partial html piece</span>
</div>

Возможно ли это сделать с помощью плагинов/загрузчиков webpack?

Ответ 1

Для этого есть несколько загрузчиков: https://webpack.github.io/docs/list-of-loaders.html#templating

Например:

HTML-погрузчик

<div>${require('./partials/gallery.html')}</div>

EJS-HTML-погрузчик

<% include some/file %>

Ответ 2

Вы можете использовать этот плагин github.com/bazilio91/ejs-compiled-loader:

{ test: /\.ejs$/, use: 'ejs-compiled-loader' }

Измените свои .html файлы в .ejs и HtmlWebpackPlugin чтобы указать на правильный шаблон .ejs:

new HtmlWebpackPlugin({
    template: 'src/views/index.ejs',
    filename: 'index.html',
    title: 'Home',
    chunks: ['index']
})

Вы можете импортировать частичные, переменные и активы в файлы .ejs:

src/views/partials/head.ejs:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <title><%= htmlWebpackPlugin.options.title %></title>
</head>

src/js/ejs_variables.js:

const hello = 'Hello!';
const bye = 'Bye!';

export {hello, bye}

src/views/index.ejs:

<% include src/views/partials/head.ejs %>
<body>    
  <h2><%= require("../js/ejs_variables.js").hello %></h2>

  <img src=<%= require("../../assets/sample_image.jpg") %> />

  <h2><%= require("../js/ejs_variables.js").bye %></h2>
</body>

Примечание. Когда вы включаете частичный, путь должен быть относительно корня вашего проекта.

Я ответил на тот же вопрос: fooobar.com/info/503570/....