Webpack Bundling Module Which I Want To Be Loaded Dynamically To Entry Point

Below code seems like using the dynamic import: (function executeApplication(): void { const loadDataButton: HTMLElement | null = document.getElementById('LoadDataButton'); if

Solution 1:

You are currently using module: "CommonJS" inside tsconfig.json, which will cause all dynamic import() to be transformed into require() calls before Webpack can actually see them. For Webpack to be able to generate new chunks, Webpack has to see dynamic import() calls.

Setting module: "esnext" will make it so the dynamic import() aren't transformed into require(), so Webpack can handle them properly.

Solution 2:

webpackMode: lazymagic comment might help.

It should generate a separate chunk for DynamicLoadingTesting/TypeScriptModuleForDynamicLoading.js.

asyncfunctionloadDataOnDemand(): Promise<string> {

  console.log("Checkpoint 2");
  constMODULE: { default: string; DYNAMICALLY_LOADED_CONST_FROM_TS_MODULE: string; } =
      awaitimport(
       /* webpackMode: "lazy" */"./DynamicLoadingTesting/TypeScriptModuleForDynamicLoading"
);
  console.log("Checkpoint 3");
  console.log(MODULE);


  returnMODULE.DYNAMICALLY_LOADED_CONST_FROM_TS_MODULE;
}