Как обрабатывать динамические пути изображения с помощью веб-пакета

Question

Мне удалось обработать большинство моих значков в большом приложении, но все еще есть два варианта использования, которые не были обнаружены.

• Динамические пути, используемые в угловых шаблонах
  <md-icon md-svg-src="{{'/assets/icons/ic-' + $ctrl.icon + '.svg'}}"></md-icon>

• Пути, используемые как переменные в компонентах, которые передаются в угловые шаблоны

то есть что-то вроде

class Comp {
   this.settingsLinks = [
     {name: 'advanced settings', icon: '/assets/icons/ic-settings.svg'}
   ]
}

и затем это используется в шаблоне, как это

<div ng-repeat="setting in $ctrl.settingsLinks">
  <md-icon md-svg-src="{{setting.icon}}"></md-icon>
</div>

Мой конфиг вебпак выглядит так

module.exports = {
  module: {
    loaders: [
      {
        test: /\.html$/,
        loaders: 'html-loader',
        options: {
          attrs: ['md-icon:md-svg-src', 'img:ng-src'],
          root: path.resolve(__dirname, '../src'),
          name: '[name]-[hash].[ext]'
        }
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        enforce: 'pre'
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name() {
            return '[name]-[hash].[ext]';
          }
        }
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: [
          'ng-annotate-loader',
          'babel-loader'
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: conf.path.src('index.html')
    }),
    new ExtractTextPlugin('index-[contenthash].css'),
  ],
  output: {
    path: path.join(process.cwd(), conf.paths.dist),
    filename: '[name]-[hash].js'
  },
  entry: {
    app: [`./${conf.path.src('app/app.module.js')}`],
    vendor: Object.keys(pkg.dependencies)
  },
};

Я рассматривал webpack.ContextReplacementPlugin как потенциальный способ обработки динамических путей. Есть ли у кого-нибудь понимание того, чего я пытаюсь достичь? Я хочу иметь возможность хэшировать имена для очистки кеша, но я пытаюсь понять, как обрабатывать динамические пути в js и шаблонах.

Answer 1

https://webpack.js.org/guides/dependency-management/

webpack предоставляет доступ к require.context, который позволяет сообщать вебпаку, каким может / должен быть динамический путь, он устраняет неопределенность в отношении того, что требуется, и позволяет вам возвращать новое хешированное имя значка из его исходного имени. Он не требует от них всех затрат на импорт, он просто создает карту между старым и новым именем, если я правильно понял.

например, это означает, что нужно захватить все имена файлов в папке с иконками, взять те, которые начинаются с ic - так как это наша схема именования для значков, это создает объект во время сборки. Я считаю, что все возможные значки будут использоваться .

const ICONS = require.context('../../../assets/icons', true, /ic-[a-zA-Z0-9.-]/);

Возвращаемое значение - это функция, в которой вы можете передать исходное имя иконки и вернуть хешированную версию. Вы также можете использовать ICONS.keys(), чтобы получить массив значков.

вот пример использования, который я использовал для предоставления некоторых значков.

const ICONS = require.context('../../../assets/icons', true, /ic-[a-zA-Z0-9.-]/);

export function getIconFromPath(path) {
  return ICONS(path);
}

function getIconsFromPaths(obj) {
  Object.keys(obj).forEach(key => Object.assign(obj, {[key]: ICONS(obj[key])}));
  return obj;
}

export default getIconsFromPaths({
  ARCHIVED: './ic-status-warning.svg',
  CANCELLED: './ic-status-cancelled.svg',
  CONFLICT: './ic-status-warning.svg',
  DRAFT: './ic-status-draft.svg',
  EARLIER: './ic-status-published.svg',
  ENDED: './ic-status-ended.svg',
  ERROR: './ic-status-published-failure.svg',
  FAILURE: './ic-status-failure.svg',
  INVALID: './ic-status-warning.svg',
  IN_PROGRESS: './ic-content-publish-in-progress.svg',
  LATEST: './ic-status-published-latest.svg',
  LOCKED: './ic-status-locked.svg',
  PUBLISHED: './ic-status-published.svg',
  PUBLISHING: './ic-content-publish-in-progress.svg',
  SCHEDULED: './ic-status-scheduled.svg',
  SCHEDULING: './ic-content-publish-in-progress.svg',
  UNLOCKED: './ic-status-unlocked.svg',
  UPDATED: './ic-webhook-request-success.svg',
  UNPUBLISHING: './ic-content-publish-in-progress.svg',
  UNSCHEDULING: './ic-content-publish-in-progress.svg',
  VALID: './ic-content-valid-tick.svg',
  WARNING: './ic-status-warning.svg'
});

Поскольку веб-пакет теперь знает, что можно вернуть отсюда, он теперь может хэшировать имя, и вы можете выполнять любые полезные действия, такие как оптимизация во время сборки.

поэтому пример класса, приведенный в моем вопросе, будет решен с помощью

import { getIconFromPath } from '../icons/;

class Comp {
   this.settingsLinks = [
     {
       name: 'advanced settings',
       icon: getIconFromPath('./ic-settings.svg')
     }
   ]
}