Webpack: включить частичку html в другую частичку?

Question

Webpack: включить частичку html в другую частичку?

Есть ли способ включить html частичку в другую частичку, используя webpack? Я использую html-загрузчик для этого:

index.html

<%= require('html-loader!./partials/_header.html') %>

Но когда я пытаюсь включить другой фрагмент в _header.html, он не может его отобразить.

Это не работает:

_header.html

<%= require('html-loader!./partials/_nav.html') %>

5

webpack partial html-webpack-plugin webpack-html-loader

Источник

user4038579 08 мар '18 в 08:33

2 ответа

Другие вопросы по тегам webpack partial html-webpack-plugin webpack-html-loader

user6345056 09 май '18 в 19:43 2018-05-09 19:43 · Answer 1 · 2018-05-09 19:43

Я немного совмещал и смог найти решение.

index.html

<%= require('html-loader?root=.&minimize=true&interpolate!./partials/_header.html') %>

а затем в _header.html

${require('html-loader?root=.!../partials/_nav.html')}

4

Источник

user6345056 09 май '18 в 19:43

user7448956 27 апр '18 в 14:17 2018-04-27 14:17 · Answer 2 · 2018-04-27 14:17

С помощью html-loader с interpolate вариант.

https://github.com/webpack-contrib/html-loader

{ test: /\.(html)$/,
  include: path.join(__dirname, 'src/views'),
  use: {
    loader: 'html-loader',
    options: {
      interpolate: true
    }
  }
}

И затем в html-страницах вы можете импортировать переменные html и javascript.

<!-- Importing top <head> section -->
${require('./partials/top.html')}
<title>Home</title>
</head>
<body>
  <!-- Importing navbar -->
  ${require('./partials/nav.html')}
  <!-- Importing variable from javascript file -->
  <h1>${require('../js/html-variables.js').hello}</h1>
  <!-- Importing footer -->
  ${require('./partials/footer.html')}
</body>
</html>

html-variables.js выглядит так:

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

export {hello, bye}

Вы также можете включить частичные элементы в другой частичный таким же образом, используя ${require('path/to/your/partial.html'),

Единственным недостатком является то, что вы не можете импортировать другие переменные из HtmlWebpackPlugin как это <%= htmlWebpackPlugin.options.title %> (по крайней мере, я не могу найти способ их импортировать), просто напишите название в html или используйте отдельный файл javascript для обработки переменных, если это необходимо.