Electron-Forge v6配置TS、React18、TailwindCSS3后页面持续刷新求助

排查Webpack监听范围 #

• 检查渲染进程的Webpack配置，在watchOptions里排除不必要的文件，避免无关修改触发编译：

  watchOptions: {
    ignored: ['node_modules/**', '../src/main/**', './dist/**']
  }
  

• 收紧TailwindCSS的content配置路径，只扫描渲染进程的源码文件，不要包含node_modules或编译输出目录：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    content: ["./src/renderer/**/*.{tsx,ts,html}"],
    // ...其他配置
  }
  

打破文件写入循环 #

• 确认Tailwind生成的CSS文件不在Webpack监听范围内：如果CSS输出文件和源码放在同一目录，会触发Webpack重复编译，进而再次触发Tailwind生成，形成循环。可以把输出文件移到监听外的目录，或者在watchOptions.ignored里排除它。
• 检查是否有插件在编译后重复修改文件，比如某些自动格式化工具，暂时关闭这类工具测试是否解决问题。

调整Electron-Forge热重载配置 #

• 在forge.config.js的渲染进程配置中，关闭liveReload仅保留HMR，避免文件变化时强制整页刷新：

  plugins: [
    new WebpackPlugin({
      mainConfig: './webpack.main.config.js',
      renderer: {
        config: './webpack.renderer.config.js',
        entryPoints: [
          {
            html: './src/renderer/index.html',
            js: './src/renderer/index.tsx',
            name: 'main_window'
          }
        ],
        devServer: {
          hot: true,
          liveReload: false
        }
      }
    })
  ]
  

定位触发编译的源头 #

• 执行webpack --watch --info-verbosity verbose启动项目，查看控制台输出的文件变化日志，精准定位是哪个文件反复触发了Webpack编译。
• 检查本地文件系统的同步工具（如iCloud、OneDrive），暂时关闭同步或将项目移至本地非同步目录，避免系统层面的文件重复修改事件。

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