基于Webpack的React应用如何实现浏览器端本地JSON文件写入

所有报错的本质是浏览器JS沙箱与Node.js运行环境的能力边界差异，不存在通过Webpack配置绕开的可能：

• fs是Node.js专属的内置文件系统模块，浏览器端天生不提供直接读写本地磁盘的权限，这是浏览器安全模型的硬性限制
• 引入fs模块报Cannot find module "fs"，是因为Webpack默认面向浏览器构建，会将所有浏览器不支持的Node内置模块标记为不可用
• 配置Webpack externals、将构建target设为Node后报Uncaught ReferenceError: require is not defined，是因为该配置是针对服务端/Node环境设计的构建逻辑，产出的代码依赖Node环境的require全局函数加载模块，而浏览器不存在该全局能力
• 你设想的“后台无弹窗直接写入本地固定路径JSON文件”的能力，只有运行在用户操作系统层的程序（如桌面应用、本地常驻服务）可以实现，纯静态网页受沙箱限制永远无法完成该操作，强制实现会被浏览器安全策略拦截

完全不需要依赖fs模块，纯浏览器原生能力即可覆盖所有需求，且满足“GitHub下载产物后直接打开index.html即可离线使用”的要求：

• 用浏览器内置的localStorage或IndexedDB做本地数据持久化：数据自动存储在用户浏览器的专属沙箱目录下，无弹窗、无额外操作，打开页面即可自动读取、写入分类与hashtag数据，和你预期的本地JSON存储体验完全一致
• 存储容量足够支撑业务：localStorage单域名提供5MB存储上限，存储hashtag分类这类纯文本数据，哪怕累计数万条分类数据也远达不到容量阈值
• 配套数据兜底能力：可增加用户主动触发的导入导出功能，将存储的JSON数据导出为文件供用户备份，或读取本地JSON文件完成数据迁移，该操作由用户主动点击触发，不会触发无感知的下载弹窗

如果后续确实需要无弹窗写入本地固定路径文件，以下方案均不符合你当前“开箱即用、纯静态HTML可离线打开”的要求，不建议在当前阶段使用：

• 将应用改造为Electron桌面应用：虽然可通过内置的Node环境调用fs模块实现本地文件写入，但需要用户下载安装桌面程序，无法通过直接打开HTML使用
• 搭建本地常驻Node服务做中转：网页通过本地接口调用服务的fs能力写文件，但用户每次使用前必须手动启动本地服务，操作成本过高

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