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

Question

// 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运行在节点环境。

而动态导入webpack需要tsconfig.json中的"module": "esNext"，如果我使用的是"module": "commonjs"配置，那么带webpackChunkName的webpack就不能工作。

我的动态导入代码和babel中的配置如下所示。

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

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

Answer 1

你很可能错过了ts-node。安装它，然后重试

npm install ts-node -D

包含更多信息的相关答案：https://stackoverflow.com/a/41137188/288906

Answer 2

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