Как обрабатывать svgs, используемые в шаблонах angular.js, с помощью веб-пакета

Question

Я пытаюсь кэшировать перебор моих svgs и других файлов, таких как перевод json.

Проблема, с которой я сталкиваюсь, заключается в том, что webpack не распознает импортированные svgs, как показано ниже:

<md-icon md-svg-src="assets/icons/ic-edit.svg"></md-icon>

Я хочу иметь возможность хэшировать это имя, поэтому я не могу просто использовать CopyWebpackPlugin для копирования и хэширования своих активов, поскольку его также необходимо обновить в разметке.

{
   test: /\.svg$/,
   loader: 'file-loader',
   options: {
     name(file) {
        // doesnt log anything as not picking up urls within angular templates
        console.log(file); 
        return '[name]-[hash].[ext]'
    }
  }
}

Какие параметры можно сделатьЯ должен обрабатывать svgs в моем приложении?Было бы очень большим рефакторингом переместить все svgs из шаблона и импортировать их в js и использовать их встроенным образом, но разве это единственный вариант, который у меня есть?то, что я ищу, даже возможно?

Answer 1

Итак, мне удалось заставить svgs обрабатываться веб-пакетом. Чтобы добраться до него, потребовалось несколько шагов, обратите внимание, что это для webpack2, и вам может потребоваться изменить то, что я сделал здесь, чтобы соответствовать вашей версии веб-пакета.

1. Мне нужно определить пользовательские атрибуты src, которые angular использует для прикрепления svg к иконке
2. Мне нужно было определить, когда html должен начать синтаксический анализ абсолютных путей, используя root
3. Мне нужно было добавить реквизит имени для активов, и я использовал для этого загрузчик файлов

Мне также пришлось переименовать пути к активам:

"assets/icons/ic-edit.svg"

"/assets/icons/ic-edit.svg"

{
  module: {
    loaders: [
      {
        test: /\.html$/,
        loaders: 'html-loader',
        options: {
          // I had to define custom srcs
          attrs: ['md-icon:md-svg-src', ':ng-src'],
          // define where the html-loader should start parsing absolute paths
          root: path.resolve(__dirname, '../src'),
          name: '[name]-[hash].[ext]'
        }
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        loader: 'file-loader',
        options: {
          // the hash for when svgs have been found
          name: '[name]-[hash].[ext]'
        }
      }   
    ],
  }
}