Как работает require у HtmlWebpackLogin?
Подключаю к странице
header.html
footer.html
всё работает
<% var data = {
title: "Поиск"
}%>
<%= _.template(require('../partials/header.html'))(data)%>
<div class="container">
...
</div>
<%= _.template(require('../partials/footer.html'))(data)%>
Подключаю на эту же страницу
<%= _.template(require('../partials/toolbar.html'))%>
Он тоже работает, но захотел я выводить в toolbar.svg инлайновый svg. Установил и подключил loader:
`test: /\.svg$/,
use: [
{
loader: 'svg-inline-loader',
}
]`
В toolbar.html вывожу
<%= require('!svg-inline-loader!../../img/icons/svg/'+toolbar.firstBtn.iconName+'.svg') %>,
(предварительно в странице сделал var toolbar со всеми переменными) и получаю ошибку
Html Webpack Plugin:
ReferenceError: require is not defined
- lodash.templateSources[139]:9 eval
lodash.templateSources[139]:9:52
- loader.js:33 eval
[search.html?..]/[html-webpack-plugin]/lib/loader.js:33:106
- loader.js:36 module.exports
[search.html?..]/[html-webpack-plugin]/lib/loader.js:36:3
- index.js:393
[site.local]/[html-webpack-plugin]/index.js:393:16
- async Promise.all
Если я пытаюсь вывести svg-inline на index.html, то svg выводится.
Что я делаю не так? Почему не работает require в подключенном файле?
test: /\.html$/,
include: path.resolve('src/html/partials/'),
use: [
{
loader: 'html-loader',
options: {
esModule: false
}
}
]
},
new HtmlWebpackPlugin({
filename: 'index.html',
template: './html/pages/index.html',
chunks: ['main']
}),
new HtmlWebpackPlugin({
filename: 'search.html',
template: './html/pages/search.html',
chunks: ['login', 'main']
}),