Webpack 4为何对CJS和UMD包抛出加载器错误？

我有几个仅通过tsc编译的包，导入到使用Webpack 4的应用时出了问题。改用Vite打包这些包并只输出CJS格式，本以为能正常运行——之前用Webpack 5打包的包导入Webpack 4宿主应用时，因为两者修改全局变量的方式不同，产生了一堆冲突。

修改了包的package.json配置：
原配置：

"type": "module",
  "types": "dist/src/index.d.ts",
  "main": "dist/index.js",

修改后：

"types": "dist/src/index.d.ts",
  "main": "dist/index.js",
  "module": "dist/index.mjs",

同时按照相关方法更新了宿主应用的resolve配置，强制Webpack 4只导入CJS而非ESM。

现在出现错误：

ERROR in ../cai-plugin/packages/common/dist/index.js 1:573
Module parse failed: Unexpected token (1:573)
You may need an appropriate loader to handle this file type.

尝试输出UMD格式时也报类似错误，指向index.umd.js的语法问题，这让我更困惑——Webpack 4难道不能正常处理CJS格式吗？

1. 锁定Vite打包的目标语法版本 #

Webpack 4对ES新特性的支持有限，Vite默认打包可能输出ES2020+的代码，超出Webpack 4的解析能力。在包的vite.config.js中明确指定兼容目标：

import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    target: 'es2015', // 匹配Webpack 4的兼容范围
    lib: {
      entry: 'src/index.ts',
      formats: ['cjs'],
      fileName: 'index'
    }
  }
})

2. 修正宿主Webpack 4的解析规则 #

确保Webpack优先读取CJS格式，并配置合适的loader处理未转译的语法：

module.exports = {
  resolve: {
    mainFields: ['main', 'module'], // 优先加载main字段对应的CJS文件
    extensions: ['.js', '.json', '.ts']
  },
  module: {
    rules: [
      // 用babel-loader转译JS/TS文件，覆盖Webpack 4不支持的语法
      {
        test: /\.(js|ts)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', { targets: { node: '10', browsers: 'last 2 versions' } }],
              '@babel/preset-typescript'
            ]
          }
        }
      }
    ]
  }
}

3. 定位具体的语法错误 #

直接打开dist/index.js，找到第1行第573位的字符，确认是什么语法导致失败——通常是可选链?.、空值合并??这类Webpack 4原生不支持的特性。如果是这类语法，要么在Vite中配置转译，要么通过babel处理。

4. 临时关闭Vite的代码压缩排查 #

Vite默认的terser压缩可能会生成Webpack 4解析不了的代码，先关闭压缩验证：

export default defineConfig({
  build: {
    minify: false
  }
})

如果关闭后错误消失，说明压缩配置有问题，可以给terser添加兼容选项：

export default defineConfig({
  build: {
    minify: 'terser',
    terserOptions: {
      ecma: 5,
      compress: {
        comparisons: false
      }
    }
  }
})

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