Webpack 和 svg-inline-loader 不起作用

Question

我尝试在多页项目中使用svg-inline-loader。

当我在索引页面上使用它时，它工作正常

    <%= require('!svg-inline- loader!../../img/toolbar/'+firstBtn.iconName+'.svg') %>

但是当我尝试将它注入部分文件时它不起作用。我明白了

     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

我的 webpack 配置

    {
      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']
       }),

我的搜索页面

     <% 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>  

和toolbar.html 我想加载工具栏的变量

      <div class="toolbar">      
          <%= require('!svg-inline- 
          loader!../../img/toolbar/'+firstBtn.iconName+'.svg') %>     
      </div>

如何用 HtmlWebpackPlugin 解决这个问题。在我注入 svg-inline-loader 之前，标题的部分工作正常

Answer 1

改用文件加载器。你可以查看我的代码here

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