迁移Next.js项目时，如何生成可在非Next.js页面加载的注入脚本

方案一：通过Next.js Webpack扩展生成（优先推荐） #

你之前的Next.js Webpack配置已生成chunk，但未做针对性配置导致无法直接使用。以下是修正后的配置，确保生成独立、可直接引入的脚本：

1. 修改next.config.js #

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config, { isServer }) => {
    // 仅在客户端构建时添加独立入口
    if (!isServer) {
      const originalEntry = config.entry;
      config.entry = async () => {
        const entries = await originalEntry();
        // 添加自定义入口，指向你的注入脚本
        entries['legacy-inject-script'] = './src/script.tsx';
        return entries;
      };

      // 固定输出文件名（避免hash后缀，方便遗留页面引用）
      config.output.filename = (pathData) => {
        return pathData.chunk.name === 'legacy-inject-script' 
          ? 'static/js/legacy-inject-script.js' 
          : config.output.filename;
      };

      // 禁止拆分该入口的chunk，确保生成单个完整文件
      config.optimization.splitChunks = {
        ...config.optimization.splitChunks,
        cacheGroups: {
          ...config.optimization.splitChunks.cacheGroups,
          default: false,
          vendors: false,
          legacyInject: {
            test: /legacy-inject-script/,
            name: 'legacy-inject-script',
            chunks: 'all',
            enforce: true,
          },
        },
      };
    }
    return config;
  },
};

module.exports = nextConfig;

2. 调整注入脚本script.tsx #

将注入逻辑暴露到全局，并自动执行：

import React from 'react';
import { createRoot } from 'react-dom/client';
import ExistingComponent from './components/ExistingComponent';

// 暴露全局方法，可手动调用或自动执行
(window as any).injectNextComponent = () => {
  const container = document.getElementById('container');
  if (!container) return;
  const reactRoot = createRoot(container);
  reactRoot.render(<ExistingComponent />);
};

// DOM加载完成后自动注入组件
document.addEventListener('DOMContentLoaded', () => {
  (window as any).injectNextComponent();
});

3. （可选）通过HtmlWebpackPlugin注入到SSI头尾 #

如果遗留页面通过SSI引入Next.js生成的头尾，可添加插件自动注入脚本：

const HtmlWebpackPlugin = require('html-webpack-plugin');

// 在next.config.js的webpack配置中添加
config.plugins.push(
  new HtmlWebpackPlugin({
    filename: 'legacy-header.html', // 遗留页面引入的header文件名
    template: './src/legacy-header-template.html', // 你的header模板
    inject: 'body',
    chunks: ['legacy-inject-script'],
  })
);

使用方式 #

运行next build后，在.next/static/js/目录下会生成legacy-inject-script.js，直接在遗留页面引入：

<script src="/_next/static/js/legacy-inject-script.js"></script>

方案二：修复独立Webpack配置 #

你之前的Webpack配置存在重复规则、路径错误、未暴露全局方法等问题，以下是修正版：

1. 修正后的webpack.config.js #

const path = require('path');

module.exports = {
  entry: './src/script.tsx',
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'ts-loader',
          options: { configFile: path.resolve(__dirname, 'tsconfig.json') },
        },
      },
      // 处理node_modules中的ES模块
      {
        test: /\.js$/,
        include: /node_modules/,
        use: 'babel-loader',
        options: { presets: ['@babel/preset-env', '@babel/preset-react'] },
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
    alias: {
      react: path.resolve(__dirname, 'node_modules/react'),
      'react-dom': path.resolve(__dirname, 'node_modules/react-dom'),
    },
  },
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'next-js-component.js',
    // 将脚本暴露到window全局对象
    library: 'NextComponentInjector',
    libraryTarget: 'window',
  },
  // 可选：如果遗留页面已全局引入React，可排除避免重复打包
  // externals: { react: 'React', 'react-dom/client': 'ReactDOM' },
};

2. 配套依赖与配置 #

安装必要依赖：

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

配置tsconfig.json开启JSX支持：

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "module": "ESNext",
    "target": "ES5",
    "moduleResolution": "node",
    "strict": true,
    "esModuleInterop": true
  }
}

使用方式 #

运行webpack --config webpack.config.js，生成的public/next-js-component.js可直接在遗留页面引入。

注意事项 #

• 优先选用方案一，可复用Next.js现有依赖与配置，无需单独维护Webpack规则
• 事件监听推荐用DOMContentLoaded替代load，DOM加载完成即可注入组件，无需等待所有资源加载
• 确保遗留页面存在id="container"的元素作为组件挂载容器

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