Как определить все куски, необходимые для модуля с плагином webpack?

Question

Я борюсь с ошибкой в ​​библиотеке react-loadable.

У меня есть компонент Login, он импортирует модуль Login.scss.Они отправляются разным чанкам с идентификатором 24 и 26.

Чтобы иметь возможность рендерить Login, react-loadable должен загрузить оба 2 чанка.Тем не менее, он загружает только первый блок с идентификатором 24.

Исходный код

const Login = loadable({
  loader: () => import( './Login'),
  loading: BackDropLoading
})

скомпилирован в

var Login = react_loadable__WEBPACK_IMPORTED_MODULE_4___default()({
  loader: function loader() {
    return Promise.all(/*! import() */[__webpack_require__.e(24), __webpack_require__.e(26)]).then(__webpack_require__.bind(null, /*! ./Login */ "e4e16af1e58ef872f736"));
  },
  modules: ['./Login'],
  webpack: function webpack() {
    return [/*require.resolve*/(/*! ./Login */ "e4e16af1e58ef872f736")];
  },
  loading: _containers_BackDrop__WEBPACK_IMPORTED_MODULE_5__["BackDropLoading"]
});

Есть ли я в любом случаеВы можете идентифицировать выше 24 и 26 числа, дающие rawRequest import('./Login')?Как webpack / babel обнаруживает эти 2 магических числа?

Это часть кода в react-loadable плагине webpack, который идентифицирует блоки для динамических операторов импорта.

function buildManifest(compiler, compilation) {
  var context = compiler.options.context;
  var manifest = {};

  compilation.chunks.forEach(function (chunk) {
    const m = []
    for(const mm of chunk.modulesIterable) m.push(mm.rawRequest)
    console.log(chunk.id, m, chunk.files)
    chunk.files.forEach(function (file) {
      chunk.forEachModule(function (module) {
        var id = module.id;
        var name = typeof module.libIdent === 'function' ? module.libIdent({ context: context }) : null;
        var publicPath = url.resolve(compilation.outputOptions.publicPath || '', file);

        var currentModule = module;
        if (module.constructor.name === 'ConcatenatedModule') {
          currentModule = module.rootModule;
        }
        if (!manifest[currentModule.rawRequest]) {
          manifest[currentModule.rawRequest] = [];
        }

        manifest[currentModule.rawRequest].push({ id: id, name: name, file: file, publicPath: publicPath });
      });
    });
  });

  return manifest;
}

Выходной манифест (частичный):

  "./Login": [
    {
      "id": "e4e16af1e58ef872f736",
      "name": "./src/client/components/auth/Login.js",
      "file": "26.js",
      "publicPath": "http://127.0.0.1:8080/bundles/26.js"
    },
    {
      "id": "e4e16af1e58ef872f736",
      "name": "./src/client/components/auth/Login.js",
      "file": "26.js.map",
      "publicPath": "http://127.0.0.1:8080/bundles/26.js.map"
    }
  ],

и другая часть в выходном манифесте

  "./Login.scss": [
    {
      "id": "61dac8f85433b72d4f5b",
      "name": "./src/client/components/auth/Login.scss",
      "file": "24.css",
      "publicPath": "http://127.0.0.1:8080/bundles/24.css"
    },
    {
      "id": "61dac8f85433b72d4f5b",
      "name": "./src/client/components/auth/Login.scss",
      "file": "24.js",
      "publicPath": "http://127.0.0.1:8080/bundles/24.js"
    },
    {
      "id": "61dac8f85433b72d4f5b",
      "name": "./src/client/components/auth/Login.scss",
      "file": "24.css.map",
      "publicPath": "http://127.0.0.1:8080/bundles/24.css.map"
    },
    {
      "id": "61dac8f85433b72d4f5b",
      "name": "./src/client/components/auth/Login.scss",
      "file": "24.js.map",
      "publicPath": "http://127.0.0.1:8080/bundles/24.js.map"
    },
    {
      "id": "61dac8f85433b72d4f5b",
      "name": "./src/client/components/auth/Login.scss",
      "file": "28.css",
      "publicPath": "http://127.0.0.1:8080/bundles/28.css"
    },
    {
      "id": "61dac8f85433b72d4f5b",
      "name": "./src/client/components/auth/Login.scss",
      "file": "28.js",
      "publicPath": "http://127.0.0.1:8080/bundles/28.js"
    },
    {
      "id": "61dac8f85433b72d4f5b",
      "name": "./src/client/components/auth/Login.scss",
      "file": "28.css.map",
      "publicPath": "http://127.0.0.1:8080/bundles/28.css.map"
    },
    {
      "id": "61dac8f85433b72d4f5b",
      "name": "./src/client/components/auth/Login.scss",
      "file": "28.js.map",
      "publicPath": "http://127.0.0.1:8080/bundles/28.js.map"
    }
  ],

Вот моя конфигурация сплитчейка webpack.В основном это не имеет значения настройки, я просто вставил сюда для справки.

  optimization: {
    runtimeChunk: "single",
    splitChunks: {
      chunks: ({name}) => !['polyfill', 'assets', 'polyfill-modern', 'ja', 'en'].includes(name),
      cacheGroups: {
        vendors: {
          test: /\/node_modules\//,
          priority: -10
        },
        assets: {
          test: /\.(svg|ttf|otf|eot|woff2?|bmp|cur|gif|icns|ico|jpe?g|png|psd|tiff|webp|dds)$/,
          priority: -10
        }
      },
    },
  },