Webpack使用Typescript延迟加载

Question

我在延迟加载和webpack时遇到问题。

肖恩·拉金（Sean Larkin）的视频展示了使用webpack 4创建延迟加载的包有多么容易（Here）。但是，当我尝试使用打字稿进行操作时，遇到了一些问题。

index.ts

export const someThing = something => import("./lazy/lazy");

和

lazy/lazy.ts
export default "I am lazy";

当我在没有任何webpack配置的情况下运行它并将文件命名为“ .js”时，我得到了一个主要块和一个小的块，用于延迟加载的模块。

但是，当我使用简单的Webpack配置将其作为“ .ts”文件运行时，我只会得到“ main.js”文件，而没有多余的块。

webpack.config.js
let config = {
    resolve: {
        extensions: [".ts", ".js"]
    },
    module: {
        rules: [
            { test: /\.ts$/, use: ["ts-loader"], exclude: /node_modules/ },
        ]
    },
}

module.exports = config;

和

tsconfig.json
{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": true,
        "lib": [ "es6", "dom" ],
        "removeComments": true
    }
}

有什么要配置的任务吗？将“ js”文件导入到“ ts”文件之间到底有什么区别？

Answer 1

动态导入是一项ES功能，您需要告诉TypeScript转换为ESNext才能获得import输出，只需更改"module": "commonjs"为即可"module": "esnext"。

采取以下代码：

export const LoadMe = () => import('./a-module')

• "module": "commonjs"编译为module.exports.LoadMe = () => require('a-module')，Webpack不知道它是动态的还是正常的require
• "module": "esnext"编译为export const LoadMe = () => import('a-module')，Webpack知道它是动态的，因为它是对import