Webpack 和 svg-inline-loader 不起作用

Question

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

Answer 1

Use file loader instead. You can view my code here

        {
            test: /\.(woff|ttf|otf|eot|woff2|svg)$/i,
            loader: "file-loader"
        }