如何将React项目导出为单内联HTML文件？支持Next.js/Vite吗？

Vite是实现这个需求的最优选择，生态插件能快速搞定资源内联和图片Base64转换，步骤如下：

1. 初始化Vite React项目

npm create vite@latest my-react-app -- --template react
cd my-react-app

2. 安装必备插件

npm install vite-plugin-singlefile vite-plugin-image-optimizer --save-dev

• vite-plugin-singlefile：将所有打包资源合并到单HTML文件中
• vite-plugin-image-optimizer：自动将指定大小的图片转为Base64

3. 修改vite.config.js配置

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { viteSingleFile } from 'vite-plugin-singlefile'
import { imageOptimizer } from 'vite-plugin-image-optimizer'

export default defineConfig({
  plugins: [
    react(),
    viteSingleFile(),
    imageOptimizer({
      // 配置图片转Base64的阈值，示例为小于10KB的图片自动转换
      png: {
        quality: 80,
        convertToBase64: { maxSize: 10 * 1024 }
      },
      jpeg: {
        quality: 80,
        convertToBase64: { maxSize: 10 * 1024 }
      },
      webp: {
        quality: 80,
        convertToBase64: { maxSize: 10 * 1024 }
      }
    })
  ],
  build: {
    outDir: 'dist',
    assetsInlineLimit: 0, // 交给插件处理所有资源内联，避免冲突
    rollupOptions: {
      output: {
        manualChunks: () => 'everything.js' // 所有JS合并为单文件，便于内联
      }
    }
  }
})

4. 执行打包

npm run build

打包完成后，dist/index.html就是包含所有内联CSS、JS和Base64图片的单文件。

如果坚持用Webpack，可通过调整配置实现需求：

1. 初始化React项目（已有项目可跳过）

npx create-react-app my-webpack-app
cd my-webpack-app
npm run eject # 弹出配置，此操作不可逆

2. 安装所需插件

npm install html-webpack-inline-source-plugin@beta url-loader --save-dev

3. 修改config/webpack.config.js

• 在module.rules中添加图片处理规则：

{
  test: /\.(png|jpe?g|gif|webp)$/i,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 10 * 1024, // 小于10KB转Base64，设为Infinity可强制所有图片转Base64
        name: '[name].[ext]'
      }
    }
  ]
}

• 修改HtmlWebpackPlugin配置，添加内联规则：

new HtmlWebpackPlugin(
  Object.assign(
    {},
    {
      inject: true,
      template: paths.appHtml,
      inlineSource: '.(js|css)$' // 内联所有JS和CSS文件
    },
    isEnvProduction
      ? {
          minify: {
            removeComments: true,
            collapseWhitespace: true,
            minifyJS: true,
            minifyCSS: true
          }
        }
      : undefined
  )
),
// 在plugins数组末尾添加
new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin)

4. 修改package.json的build命令，指定输出目录为dist：

"scripts": {
  "build": "webpack --mode production --output-path dist"
}

5. 执行打包

npm run build

Next.js核心是SSR/SSG架构，默认会拆分多个资源chunk，要实现完全内联所有资源需要深度自定义webpack配置，还要处理图片Base64转换，配置复杂度远高于Vite或纯Webpack，不推荐用Next.js实现此需求。

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