Webpack и svg-inline-loader не работают - PullRequest
5 голосов
/ 12 апреля 2020

Я пытаюсь использовать 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

Моя конфигурация веб-пакета

    {
      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

1 Ответ

3 голосов
/ 12 апреля 2020

Используйте загрузчик файлов. Вы можете посмотреть мой код здесь

        {
            test: /\.(woff|ttf|otf|eot|woff2|svg)$/i,
            loader: "file-loader"
        }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...