NormalModuleReplacementPlugin не работает при незначительном изменении resourceRegExp

Question

Как официально предложено на домашней странице CKEditor5 , я хочу заменить стандартные значки, которые поставляются с несколькими подключаемыми модулями. Поскольку каждый плагин (например, ckeditor5-core или ckeditor5-alignment) предлагает свой собственный набор .svg в [PLUGIN_DIR] / theme / icons, предлагаемая стратегия - заменить их на свой измененный - понятна и понятна:

(...) использовать плагин NormalModuleReplacementPlugin в веб-пакете

...
plugins: [
  new webpack.NormalModuleReplacementPlugin(
    /bold\.svg/,
    '/absolute/path/to/my/icon.svg'
  )
]

Основываясь на этом коде, я экспериментировал и получил следующее:

...
plugins: [
  new webpack.NormalModuleReplacementPlugin(
    /\/theme\/icons\/[^/]+\.svg$/,
    resource => {
      console.log(resource.request);
      resource.request = path.resolve(
        THEME_PATH,
        "../../icons/coffee-solid.svg"
      );
    }
  ),
]

, которые вызывают следующие (требуемые / ожидаемые) изменения: до после

частичный вывод на консоль:

../../theme/icons/bold.svg
../../theme/icons/italic.svg
@ckeditor/ckeditor5-core/theme/icons/quote.svg
@ckeditor/ckeditor5-core/theme/icons/image.svg
../theme/icons/numberedlist.svg
../theme/icons/bulletedlist.svg
../theme/icons/align-justify.svg
../theme/icons/link.svg
(node:10394) DeprecationWarning: Chunk.mapModules: Use Array.from(chunk.modulesIterable, fn) instead
@ckeditor/ckeditor5-core/theme/icons/object-right.svg
@ckeditor/ckeditor5-core/theme/icons/object-center.svg
@ckeditor/ckeditor5-core/theme/icons/object-left.svg
@ckeditor/ckeditor5-core/theme/icons/object-full-width.svg
@ckeditor/ckeditor5-core/theme/icons/low-vision.svg
../theme/icons/drag-handler.svg
@ckeditor/ckeditor5-core/theme/icons/cancel.svg
../theme/icons/redo.svg
../../../theme/icons/next-arrow.svg
../../../theme/icons/previous-arrow.svg
../theme/icons/undo.svg
../../../theme/icons/dropdown-arrow.svg
@ckeditor/ckeditor5-core/theme/icons/cancel.svg
@ckeditor/ckeditor5-core/theme/icons/check.svg
@ckeditor/ckeditor5-core/theme/icons/check.svg
@ckeditor/ckeditor5-core/theme/icons/pencil.svg
../../theme/icons/unlink.svg
../../theme/icons/image_placeholder.svg
../theme/icons/align-center.svg
../theme/icons/align-right.svg
../theme/icons/align-left.svg

Однако, когда я хочу ограничить папку @ckeditor, пропустив соответствующее регулярное выражение, вот что происходит:

...
plugins: [
  new webpack.NormalModuleReplacementPlugin(
    /ckeditor5-[^/]+\/theme\/icons\/[^/]+\.svg$/,
    resource => {
      console.log(resource.request);
      resource.request = path.resolve(
        THEME_PATH,
        "../../icons/coffee-solid.svg"
      );
    }
  ),
]

до (см. Выше)

после

частичный вывод на консоль (2):

@ckeditor/ckeditor5-core/theme/icons/quote.svg
@ckeditor/ckeditor5-core/theme/icons/image.svg
(node:10368) DeprecationWarning: Chunk.mapModules: Use Array.from(chunk.modulesIterable, fn) instead
@ckeditor/ckeditor5-core/theme/icons/object-right.svg
@ckeditor/ckeditor5-core/theme/icons/object-center.svg
@ckeditor/ckeditor5-core/theme/icons/object-left.svg
@ckeditor/ckeditor5-core/theme/icons/object-full-width.svg
@ckeditor/ckeditor5-core/theme/icons/low-vision.svg
@ckeditor/ckeditor5-core/theme/icons/pencil.svg
[PATH_TO_WS]/workspace/my-cute-editor/node_modules/raw-loader/dist/cjs.js![PATH_TO_WS]/workspace/my-cute-editor/node_modules/@ckeditor/ckeditor5-basic-styles/theme/icons/bold.svg
[PATH_TO_WS]/workspace/my-cute-editor/node_modules/raw-loader/dist/cjs.js![PATH_TO_WS]/workspace/my-cute-editor/node_modules/@ckeditor/ckeditor5-basic-styles/theme/icons/italic.svg
[PATH_TO_WS]/workspace/my-cute-editor/node_modules/raw-loader/dist/cjs.js![PATH_TO_WS]/workspace/my-cute-editor/node_modules/@ckeditor/ckeditor5-list/theme/icons/numberedlist.svg
[PATH_TO_WS]/workspace/my-cute-editor/node_modules/raw-loader/dist/cjs.js![PATH_TO_WS]/workspace/my-cute-editor/node_modules/@ckeditor/ckeditor5-list/theme/icons/bulletedlist.svg
[PATH_TO_WS]/workspace/my-cute-editor/node_modules/raw-loader/dist/cjs.js![PATH_TO_WS]/workspace/my-cute-editor/node_modules/@ckeditor/ckeditor5-alignment/theme/icons/align-justify.svg
[PATH_TO_WS]/workspace/my-cute-editor/node_modules/raw-loader/dist/cjs.js![PATH_TO_WS]/workspace/my-cute-editor/node_modules/@ckeditor/ckeditor5-link/theme/icons/link.svg
[PATH_TO_WS]/workspace/my-cute-editor/node_modules/raw-loader/dist/cjs.js![PATH_TO_WS]/workspace/my-cute-editor/node_modules/@ckeditor/ckeditor5-widget/theme/icons/drag-handler.svg
[PATH_TO_WS]/workspace/my-cute-editor/node_modules/raw-loader/dist/cjs.js![PATH_TO_WS]/workspace/my-cute-editor/node_modules/@ckeditor/ckeditor5-undo/theme/icons/redo.svg
[PATH_TO_WS]/workspace/my-cute-editor/node_modules/raw-loader/dist/cjs.js![PATH_TO_WS]/workspace/my-cute-editor/node_modules/@ckeditor/ckeditor5-undo/theme/icons/undo.svg
[PATH_TO_WS]/workspace/my-cute-editor/node_modules/raw-loader/dist/cjs.js![PATH_TO_WS]/workspace/my-cute-editor/node_modules/@ckeditor/ckeditor5-ui/theme/icons/next-arrow.svg
[PATH_TO_WS]/workspace/my-cute-editor/node_modules/raw-loader/dist/cjs.js![PATH_TO_WS]/workspace/my-cute-editor/node_modules/@ckeditor/ckeditor5-ui/theme/icons/previous-arrow.svg
[PATH_TO_WS]/workspace/my-cute-editor/node_modules/raw-loader/dist/cjs.js![PATH_TO_WS]/workspace/my-cute-editor/node_modules/@ckeditor/ckeditor5-ui/theme/icons/dropdown-arrow.svg
@ckeditor/ckeditor5-core/theme/icons/cancel.svg
@ckeditor/ckeditor5-core/theme/icons/check.svg
@ckeditor/ckeditor5-core/theme/icons/cancel.svg
@ckeditor/ckeditor5-core/theme/icons/check.svg
[PATH_TO_WS]/workspace/my-cute-editor/node_modules/raw-loader/dist/cjs.js![PATH_TO_WS]/workspace/my-cute-editor/node_modules/@ckeditor/ckeditor5-link/theme/icons/unlink.svg
[PATH_TO_WS]/workspace/my-cute-editor/node_modules/raw-loader/dist/cjs.js![PATH_TO_WS]/workspace/my-cute-editor/node_modules/@ckeditor/ckeditor5-alignment/theme/icons/align-center.svg
[PATH_TO_WS]/workspace/my-cute-editor/node_modules/raw-loader/dist/cjs.js![PATH_TO_WS]/workspace/my-cute-editor/node_modules/@ckeditor/ckeditor5-alignment/theme/icons/align-right.svg
[PATH_TO_WS]/workspace/my-cute-editor/node_modules/raw-loader/dist/cjs.js![PATH_TO_WS]/workspace/my-cute-editor/node_modules/@ckeditor/ckeditor5-alignment/theme/icons/align-left.svg
[PATH_TO_WS]/workspace/my-cute-editor/node_modules/raw-loader/dist/cjs.js![PATH_TO_WS]/workspace/my-cute-editor/node_modules/@ckeditor/ckeditor5-image/theme/icons/image_placeholder.svg

Почему это происходит?

Примечание: я должен использовать синтаксис с ресурсом (насколько мне известно, единственной альтернативой), потому что позже я хочу динамически загружать значки.

Answer 1

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

/*
THEME_PATH := path to your theme folder (that contains /theme/theme.css)
-> see https://github.com/ckeditor/ckeditor5-theme-lark (use it as a template)
Both REPLACE_ICONS_REGEXP and replaceIcons should be use as described above
*/

const REPLACE_ICONS_REGEXP = /ckeditor5-[^/]+\/theme\/icons\/[^/]+\.svg$/;

function replaceIcons(resource) {
  {
    const [, ckeditorPlugin, svgFileToReplace] = resource.request.match(
      /(ckeditor5-[^/]+)\/theme\/icons\/([^/]+\.svg)$/
    );

    const designatedSvgPath = path.resolve(
      THEME_PATH,
      `../../icons/${svgFileToReplace}`
    );

    try {
      fs.accessSync(designatedSvgPath, fs.constants.F_OK);
      resource.resource = designatedSvgPath; // as ma2ciek suggested
    } catch (err) {
      try {
        // Create mock file to be replaced with themed svg
        fs.writeFileSync(
          path.resolve(THEME_PATH, `../../icons/_${svgFileToReplace}`),
          ""
        );
      } catch (err) {
        err.message =
          `Unable to create icon mock file for ${ckeditorPlugin}.\n` +
          err.message;
        throw err;
      }
    }
  }
}

Answer 2

Как я уже ответил в https://github.com/ckeditor/ckeditor5/issues/1831:

Как видно из исходного кода NormalModuleReplacementPlugin, регулярное выражение проверяется два раза: один раз перед разрешением по запросу и один раз после разрешения по ресурсу.

Как вы можете видеть, чаще всего ваша функция вызывается после разрешения (поскольку запросы не соответствуют регулярному выражению). Запрос после разрешения усиливается загрузчиками (поэтому пути такие длинные и содержат странные символы), и фактически эта опция больше не используется. Вот почему вы должны изменить result.resource вместо result.request.

например. попробуйте следующий плагин:

new webpack.NormalModuleReplacementPlugin(
    /ckeditor5-[^/]+\/theme\/icons\/bold\.svg/,
    result => {
        if ( result.resource ) {
            result.resource = result.resource.replace( 'bold', 'code' );
        }
    }
)