NextJS中Webpack生成可嵌入第三方的可执行JS文件问题

问题核心在于NextJS默认的Webpack打包配置是为React应用的模块加载设计的，产物并非适合直接在浏览器全局环境执行的格式（比如UMD或IIFE）。以下是具体解决步骤：

1. 创建独立的Widget入口文件 #

在项目中新建单独的Widget源码文件，比如src/widgets/login-widget.js，写入测试代码：

console.log('Login widget loaded successfully!');
// 后续可在此添加Zoid组件的初始化代码

2. 修改NextJS的Webpack配置 #

编辑next.config.js，添加多入口打包配置，指定输出格式为自执行的IIFE或通用的UMD：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config, { isServer }) => {
    // 服务端打包时跳过Widget配置
    if (isServer) return config;

    // 添加Widget的打包入口
    config.entry['login-widget'] = './src/widgets/login-widget.js';

    // 调整输出配置，生成可直接执行的脚本
    config.output = {
      ...config.output,
      filename: '[name].js', // 固定文件名，方便第三方引用
      library: {
        type: 'iife', // 自执行函数格式，引入后自动运行代码
      },
    };

    // 可选：生产环境打包时保留console.log（避免被压缩工具移除）
    if (config.mode === 'production') {
      config.optimization.minimizer.forEach(minimizer => {
        if (minimizer.constructor.name === 'TerserPlugin') {
          minimizer.options.terserOptions.compress.drop_console = false;
        }
      });
    }

    return config;
  },
};

module.exports = nextConfig;

如果需要让Widget暴露全局变量供第三方调用（比如Zoid组件实例），可以改用UMD格式：

library: {
  name: 'LoginWidget', // 全局变量名，第三方可通过window.LoginWidget访问
  type: 'umd',
  umdNamedDefine: true,
}

3. 打包并获取产物脚本 #

执行打包命令：

npm run build

打包完成后，在项目的.next/static/chunks目录下找到login-widget.js文件，这就是可直接给第三方网站引入的脚本。

4. 在静态HTML中测试引入 #

创建一个静态HTML文件，引入该脚本：

<!DOCTYPE html>
<html>
<head>
  <title>Widget Test</title>
</head>
<body>
  <script src="./login-widget.js"></script>
</body>
</html>

打开该HTML文件，查看浏览器控制台，就能看到Login widget loaded successfully!的输出了。

后续集成Zoid时，只需在login-widget.js中编写Zoid组件的初始化逻辑即可，确保代码在全局环境下能正常执行（比如挂载到window对象上，或直接自执行初始化）。

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