使用Webpack 4.8.1打包TypeScript 2.8.1后浏览器报"Void 0 is not function"错误

这个错误通常是因为TypeScript的模块配置和Webpack的打包机制不兼容导致的，结合你给出的配置文件，我帮你梳理下问题点和修复方案：

核心问题分析 #

你的tsconfig.json里配置了"module": "system"，这是给SystemJS模块加载器用的模块格式，但Webpack本身是独立的模块打包工具，它默认处理CommonJS/ES模块格式，两者的语法逻辑冲突，就会导致浏览器中出现void 0 is not a function这类奇怪的错误。另外，tsconfig.json里的outFile选项也和Webpack的输出逻辑冲突——Webpack会自己处理模块合并和输出，不需要TypeScript来做这件事。

具体修复步骤 #

1. 修改tsconfig.json配置 #

把模块格式改成Webpack兼容的类型，同时移除冲突的outFile选项：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs", // 换成commonjs或esnext，Webpack都能很好处理
    "noImplicitAny": false,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true,
    "allowJs": true,
    "moduleResolution": "node"
  },
  "include": [ "./Scripts/*" ],
  "exclude": [ "node_modules", "**/*.spec.ts" ]
}

2. 优化webpack.config.js配置 #

添加resolve.extensions让Webpack能自动识别.ts文件，避免导入时的路径问题：

var glob = require("glob");
module.exports = { 
  entry: { 
    LiveAgentApplication: "./Scripts/LiveAgent.Application.ts" 
  },
  output: { 
    path: __dirname + '/dist', 
    filename: '[name].bundle.js' 
  },
  module: { 
    rules: [ 
      { 
        test: /\.ts$/, 
        loader: 'ts-loader' 
      } 
    ] 
  },
  resolve: {
    extensions: ['.ts', '.js'] // 告诉Webpack优先解析.ts文件
  },
  optimization: { 
    minimize: false 
  }
};

3. 清理不必要的依赖（可选） #

如果你没有用SystemJS来加载打包后的文件，建议移除package.json里的webpack-system-register依赖，这个包是用来把Webpack打包的文件注册到SystemJS中的，不需要的话留着反而可能引发冲突。

验证修复 #

修改完配置后，重新执行打包命令：

npx webpack --mode development

然后在浏览器中加载新生成的LiveAgentApplication.bundle.js，应该就能解决void 0 is not a function的错误了。

内容的提问来源于stack exchange，提问作者Mohammed Yasin Shaikh