使用Nx Webpack执行器打包的代码无法自执行，webpack-cli打包正常

1. Nx默认配置注入：Nx的Webpack执行器会默认开启代码分割、模块联邦（Module Federation）或多入口处理，导致bundle生成的是chunk格式而非自执行IIFE。
2. 配置导出方式差异：函数式配置会接收Nx的默认配置作为参数，这些默认配置可能覆盖了你手动设置的output相关选项；而webpack-cli的对象式配置没有这些默认注入，使用的是Webpack原生的单入口打包逻辑。

1. 覆盖Webpack配置，强制生成自执行IIFE #

在你的函数式webpack.config中，覆盖优化和输出配置，禁用代码分割并指定输出格式：

module.exports = function (nxDefaultConfig) {
  return {
    ...nxDefaultConfig,
    // 禁用代码分割，避免生成chunk
    optimization: {
      ...nxDefaultConfig.optimization,
      splitChunks: false,
      runtimeChunk: false,
    },
    output: {
      ...nxDefaultConfig.output,
      // 指定输出为自执行脚本
      libraryTarget: 'window', // 或'self'，根据运行环境选择
      chunkFormat: 'none', // 禁用chunk格式输出
      module: false, // 关闭ES模块输出，生成传统脚本
    },
  };
};

2. 关闭Nx的模块联邦配置 #

检查项目的project.json中对应build目标的配置，确保关闭模块联邦：

{
  "targets": {
    "build": {
      "executor": "@nrwl/webpack:webpack",
      "options": {
        // ...其他配置
        "moduleFederation": false, // 必须设置为false
        "generatePackageJson": true
      }
    }
  }
}

3. 确认入口配置 #

确保Webpack入口是单个文件，避免Nx自动处理多入口导致的代码分割。在webpack.config中显式指定入口：

module.exports = function (nxDefaultConfig) {
  return {
    ...nxDefaultConfig,
    entry: './src/main.ts', // 替换为你的实际入口文件
    // ...其他覆盖配置
  };
};

内容的提问来源于stack exchange，提问作者S. C.