我想动态加载到入口点的 Webpack 捆绑模块 [英] Webpack bundling module which I want to be loaded dynamically to entry point

问题描述

下面的代码似乎使用了

没有 webpack errros，并且在浏览器中的输出似乎是正确的:

我的 Webpack 配置:

<代码>{name: 'FrontendLogicPreProcessingTesting',上下文:'D:\\IntelliJ IDEA\\XXXXX\\ProjectBuildingCommonTest\\00-Source\\FrontendLogicPreProcessingTesting',目标:'网络'，入口: {FrontendLogicPreProcessingTesting: 'D:/IntelliJ IDEA/XXXXX/ProjectBuildingCommonTest/00-Source/FrontendLogicPreProcessingTesting/FrontendLogicPreProcessingTesting.ts'},输出: {路径:'D:\\IntelliJ IDEA\\XXXXX\\ProjectBuildingCommonTest\\01-DevelopmentBuild\\FrontendLogicPreProcessing测试',公共路径:'./',文件名:'[名称].js'，块文件名:'loading_on_demand/partial__[id].js'},模式:'发展'，看:真的，devtool: 'eval-cheap-source-map',模块: {规则: [[对象], [对象],[对象], [对象],[对象], [对象],[对象], [对象],[目的]]},解决: {扩展名:['.mjs'，'.js'，'.ts']，别名:{ vue: 'vue/dist/vue.common.js' }},插件: [定义插件{定义:[对象]}，ForkTsCheckerWebpackPlugin { options: [Object] },],优化:{最小化:假，emitOnErrors:真}}

我使用 webpack 5.x.x.，但我在使用 4.x.x. 时遇到了同样的问题

我的 TypeScript 配置:

{编译器选项":{目标":es2017"，严格":真实，模块":CommonJS"，模块分辨率":节点"，esModuleInterop":真，allowSyntheticDefaultImports":真，allowJs":假，experimentalDecorators":真，baseUrl":./"，路径":{},noUnusedParameters":真，noImplicitReturns":真}}

没有满足动态加载的哪些条件?

解决方案

您当前在 tsconfig.json 中使用了 module: "CommonJS"，这将导致所有动态 import() 在 Webpack 实际看到它们之前转换为 require() 调用.为了让 Webpack 能够生成新的块，Webpack 必须看到动态的 import() 调用.

设置 module: "esnext" 将使得动态 import() 不会转换为 require()，所以Webpack 可以正确处理它们.

Below code seems like using the dynamic import:

(function executeApplication(): void {

  const loadDataButton: HTMLElement | null = document.getElementById("LoadDataButton");
  if (loadDataButton !== null) {
    loadDataButton.addEventListener("click", (): void => {
      (async function handler(): Promise<void> {
        console.log("Checkpoint 1");
        const loadedValue: string = await loadDataOnDemand();
        console.log(loadedValue);
      })().catch((): void => { /* */ });
    });
  }
})();


async function loadDataOnDemand(): Promise<string> {

  console.log("Checkpoint 2");
  const MODULE: { default: string; DYNAMICALLY_LOADED_CONST_FROM_TS_MODULE: string; } =
      await import("./DynamicLoadingTesting/TypeScriptModuleForDynamicLoading");
  console.log("Checkpoint 3");
  console.log(MODULE);


  return MODULE.DYNAMICALLY_LOADED_CONST_FROM_TS_MODULE;
}

However actually TypeScriptModuleForDynamicLoading.ts has been bundled to entry point:

FrontendLogicPreProcessingTesting:
  asset FrontendLogicPreProcessingTesting.js 11.2 KiB [emitted] (name: FrontendLogicPreProcessingTesting)
  ./FrontendLogicPreProcessingTesting.ts 2.28 KiB [built] [code generated]
  ./DynamicLoadingTesting/TypeScriptModuleForDynamicLoading.ts 419 bytes [built] [code generated]
  FrontendLogicPreProcessingTesting (webpack 5.4.0) compiled successfully in 710 ms

No webpack errros, and in output in browser seems to be correct:

My Webpack config:

{
  name: 'FrontendLogicPreProcessingTesting',
  context: 'D:\\IntelliJ IDEA\\XXXXX\\ProjectBuildingCommonTest\\00-Source\\FrontendLogicPreProcessingTesting'
,
  target: 'web',
  entry: {
    FrontendLogicPreProcessingTesting: 'D:/IntelliJ IDEA/XXXXX/ProjectBuildingCommonTest/00-Source/FrontendLogic
PreProcessingTesting/FrontendLogicPreProcessingTesting.ts'
  },
  output: {
    path: 'D:\\IntelliJ IDEA\\XXXXX\\ProjectBuildingCommonTest\\01-DevelopmentBuild\\FrontendLogicPreProcessin
gTesting',
    publicPath: './',
    filename: '[name].js',
    chunkFilename: 'loading_on_demand/partial__[id].js'
  },
  mode: 'development',
  watch: true,
  devtool: 'eval-cheap-source-map',
  module: {
    rules: [
      [Object], [Object],
      [Object], [Object],
      [Object], [Object],
      [Object], [Object],
      [Object]
    ]
  },
  resolve: {
    extensions: [ '.mjs', '.js', '.ts' ],
    alias: { vue: 'vue/dist/vue.common.js' }
  },
  plugins: [
    DefinePlugin { definitions: [Object] },
    ForkTsCheckerWebpackPlugin { options: [Object] },
  ],
  optimization: { minimize: false, emitOnErrors: true }
}

I using webpack 5.x.x., but I faced with same problem when used 4.x.x.

My TypeScript config:

{
  "compilerOptions": {

    "target": "es2017",
    "strict": true,

    "module": "CommonJS",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "allowJs": false,

    "experimentalDecorators": true,

    "baseUrl": "./",
    "paths": {

    },

    "noUnusedParameters": true,
    "noImplicitReturns": true
  }
}

Which conditions of dynamic loading has not been satisfied?

解决方案

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.

这篇关于我想动态加载到入口点的 Webpack 捆绑模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！