Webpack 4 报错：exports is not defined 问题求助

问题根源 #

你把TypeScript的模块编译目标设为了commonjs，但浏览器环境本身并不支持CommonJS规范的exports、require这些语法。虽然Webpack能处理CommonJS模块，但如果配置或代码写法不当，就会导致浏览器无法识别这些语法，进而抛出这个错误。

具体修复方案 #

1. 调整TypeScript的模块配置

修改tsconfig.json里的module选项为esnext或es2015，让TypeScript输出ES模块语法，Webpack能更顺畅地处理并打包成浏览器兼容的格式：

{
  "compilerOptions": {
    // 保留其他原有配置
    "module": "esnext", // 替换原来的commonjs
    // 保留其他原有配置
  },
  "compileOnSave": true,
  "exclude": [ "node_modules" ]
}

2. 检查Webpack的核心配置（针对你未写完的配置补充）

如果你的Webpack基础配置里有这些设置，需要确认：

• 确保target设为web（浏览器应用的默认值，不要设为node，否则会打包出Node.js环境的代码）
• 避免把output.libraryTarget设为commonjs，建议用umd或者默认值：

const path = require('path');

module.exports = {
  // 补充基础配置示例
  target: 'web',
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: 'umd' // 或直接去掉，使用默认值
  },
  // 其他原有配置
}

3. 处理第三方依赖或混合模块语法的情况

如果你的代码里混用了ES模块和CommonJS语法，或者某些第三方依赖未被正确转译，可以添加Babel来统一处理：
首先安装依赖：

npm install babel-loader @babel/core @babel/preset-env @babel/preset-typescript --save-dev

然后在Webpack的module.rules中添加规则：

module.exports = {
  // 其他配置
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: ['babel-loader', 'ts-loader'],
        exclude: /node_modules/
      }
    ]
  }
}

同时创建.babelrc文件：

{
  "presets": [
    ["@babel/preset-env", { "targets": "defaults" }],
    "@babel/preset-typescript"
  ]
}

额外提示 #

如果你的Webpack配置是继承自其他文件（比如你写的require("./co..."），记得检查那个基础配置里有没有上述提到的影响模块输出的设置，避免冲突。

内容的提问来源于stack exchange，提问作者tsiro