Пользовательские замены веб-пакетов, такие как [name], [id], [hash], но я хочу создать свою собственную замену - PullRequest
Новая
       16

Пользовательские замены веб-пакетов, такие как [name], [id], [hash], но я хочу создать свою собственную замену

0 голосов
/ 11 мая 2018

В частности, я хочу построить тег [camelCaseName], который будет преобразовывать имя файла (в случае змеи) в случай верблюда.

Но я не могу найти инструкции о том, как создать собственную замену. Интересно, есть ли у кого-нибудь ресурсы или примеры по этому поводу?

Спасибо.

1 Ответ

0 голосов
/ 11 мая 2018

Думаю, я понял это, посмотрев на код, который обрабатывает [name] (https://github.com/webpack/webpack/blob/master/lib/TemplatedPathPlugin.js).

Мы можем написать плагин, который подключается к asset-path. 

const replacePathVariables = (path, data) => {
  const REGEXP_CAMEL_CASE_NAME = /\[camelcasename\]/gi;
    if (typeof path === "function") {
        path = path(data);
    }

  if (data && data.chunk && data.chunk.name) {
    return path.replace(
      REGEXP_CAMEL_CASE_NAME,
      data.chunk.name
        .replace(/(\-\w)/g, (matches) => { return matches[1].toUpperCase(); })
        .replace(/(^\w)/, (matches) => { return matches[0].toUpperCase(); })
    );
  } else {
    return path;
  }

};

class ExtraTemplatedPathPlugin {
    apply(compiler) {
    compiler.plugin("compilation", function(compilation) {
            const mainTemplate = compilation.mainTemplate;
            mainTemplate.plugin('asset-path', replacePathVariables);
        });
    }
}

Приведенный выше код поддерживает замену [camelcasename].

...