Node Server中无法导入fs模块的问题求助

使用npm和webpack运行Node服务器，导入three.js及其加载器/控制器均正常，但尝试导入fs时，npm终端无报错，浏览器控制台出现如下错误。已尝试多种解决方案（不同导入方式、ES6/CJS的webpack配置等），均遇到导入fs时触发require未定义的问题，排除浏览器环境使用fs的误操作。

浏览器控制台错误 #

Uncaught ReferenceError: require is not defined  
    at Object.fs (main.js:19:1)  
    at __webpack_require__ (main.js:93:41)  
    at eval (index.js:5:60)  
    at ./src/index.js (main.js:69:1)  
    at __webpack_require__ (main.js:93:41)  
    at main.js:133:37  
    at main.js:135:12  

package.json配置 #

{
  "name": "customizer",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "nodemon -x \"npm run buildrun\"",
    "buildrun": "webpack && npm run server",
    "server": "nodemon --exec python -m http.server",
    "build": "echo 'build' && webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/node": "^18.15.11",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1"
  },
  "dependencies": {
    "jquery": "^3.6.3",
    "lodash": "^4.17.21",
    "three": "^0.149.0"
  },
  "browser": {
    "fs": false
  }
}

webpack.config.js配置 #

import * as path from 'path';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  entry: './src/index.js',
  target: 'node',
  mode: 'development',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  }, 
  resolve: {
    fallback: {
      fs: false
    }
  }
}; 

导入代码（仅最后一行触发问题） #

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import {fs} from 'fs';

• 核心矛盾：webpack配置target: 'node'是为Node环境打包，但最终用python -m http.server将代码部署到浏览器环境运行，浏览器不支持Node的require语法和fs模块。
• 修正步骤：
  1. 修改webpack配置的target为web，适配浏览器环境：

     export default {
       // 保留其他配置
       target: 'web',
       // 保留其他配置
     };
     

  2. 移除代码中对fs的导入——浏览器环境无法直接使用Node的fs模块。若需读取文件，改用浏览器端API（如FileReader）或通过后端接口获取文件内容。
  3. 确认package.json中"browser": {"fs": false}的配置保留，确保webpack不会尝试打包fs模块。
  4. 若业务必须使用fs，将这部分逻辑移至Node后端服务，前端通过HTTP请求与后端交互，而非在浏览器代码中直接调用fs。

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