typescript 动态导入与 tsconfig.json 中的 webpack.config 冲突？

Posted 2023-03-13

【中文标题】typescript 动态导入与 tsconfig.json 中的 webpack.config 冲突？

【英文标题】：typescript dynamic import ***es with webpack.config in tsconfig.json?

【发布时间】：2020-07-22 19:29:36

【问题描述】：

// tsconfig.json

  "compilerOptions": 
    "target": "es5",
    "lib": ["dom","esnext"],
    // "module": "commonjs",
    "module": "esNext",
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "moduleResolution": "node"
  

//webpack.config.ts
import merge from 'webpack-merge'
import base from './webpack.base'
import webpack from 'webpack';
// ...

使用上面的配置，当我运行npm run build时，它会抛出错误：

(function (exports, require, module, __filename, __dirname)  import merge from 'webpack-merge';
SyntaxError: Cannot use import statement outside a module`

我找到了我应该使用"module": "commonjs"的解决方案，这无疑是webpack在node环境中运行的。

而 webpack 的动态导入需要 "module": "esNext" in tsconfig.json, 如果我使用"module": "commonjs" 配置，带有webpackChunkName 的webpack 将不起作用。

我的动态导入代码是这样的，在 babel 中配置。

const starsDance = () => import(/* webpackChunkName: "starsDance" */'./game-stars-dance')

我通过很多谷歌都找不到最终的解决方案，我该怎么办？非常感谢您的帮助。

【问题讨论】：

a relative answer

【参考方案1】：

我在尝试运行导致问题的webpack --mode production 命令之前通过安装ts-node 解决了这个问题。我相信 ts-node 是用来将webpack.config.ts文件转换成node可以理解的东西。

【参考方案2】：

您可能缺少ts-node。安装并重试

npm install ts-node -D

相关答案及更多信息：https://***.com/a/41137188/288906