I try to use svg-inline-loader
in multipages project.
When i use it on index page it works fine
<%= require('!svg-inline- loader!../../img/toolbar/'+firstBtn.iconName+'.svg') %>
but when i try to inject it in partial file it doesn't work. I get
Html Webpack Plugin:
ReferenceError: require is not defined
- lodash.templateSources[16]:7 eval
lodash.templateSources[16]:7:50
- loader.js:31 eval
[search.html?..]/[html-webpack-plugin]/lib/loader.js:31:106
- loader.js:36 module.exports
[search.html?..]/[html-webpack-plugin]/lib/loader.js:36:3
- index.js:422
[site.local]/[html-webpack-plugin]/index.js:422:16
My webpack config
{
test: /\.html$/,
include: [path.resolve('src/html/partials/')],
use: ['html-loader']
},
new HtmlWebpackPlugin({
filename: 'index.html',
template: './html/pages/index.html',
chunks: ['main']
}),
new HtmlWebpackPlugin({
filename: 'login.html',
template: './html/pages/login.html',
chunks: ['login', 'main']
}),
new HtmlWebpackPlugin({
filename: 'search.html',
template: './html/pages/search.html',
chunks: ['main']
}),
my search page
<% var toolbar = {
firstBtn: {
title: "City",
anchor: "login.html",
iconName: "city"
}
} %>
<%= _.template(require('../partials/header.html'))%>
<div class="container">
<div class="search">
<%= _.template(require('../partials/toolbar.html'))(toolbar)%>
</div>
and toolbar.html
where i want to load toolbar's variables
<div class="toolbar">
<%= require('!svg-inline-
loader!../../img/toolbar/'+firstBtn.iconName+'.svg') %>
</div>
How to solve this problem with HtmlWebpackPlugin. Header's partial works fine before i inject svg-inline-loader
Use file loader instead. You can view my code here
{
test: /\.(woff|ttf|otf|eot|woff2|svg)$/i,
loader: "file-loader"
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With