Node.js 网页包不能使用\uuuu目录名？

我正在尝试使用节点postgres将我的应用程序连接到postgres。我使用的代码是：

import React from 'react';
import pg from 'pg';
import fs from 'fs';
var cn = {
  host: 'localhost', // server name or IP address; 
  port: 5432,
  database: 'my_db',
  user: 'myname',
  password: 'mypass'
};

它会产生错误：

index.js:5 Uncaught ReferenceError: __dirname is not defined
up  @ index.js:5
__webpack_require__ @ bootstrap 539ecc7…:19
(anonymous function)  @ client.js:4
__webpack_require__ @ bootstrap 539ecc7…:19
(anonymous function)  @ index.js:3
console.EventEmitter._events  @ index.js:81
__webpack_require__ @ bootstrap 539ecc7…:19
(anonymous function)  @ app.js:26957
__webpack_require__ @ bootstrap 539ecc7…:19
content @ bootstrap 539ecc7…:39
__webpack_require__ @ bootstrap 539ecc7…:19
(anonymous function)  @ bootstrap 539ecc7…:39
(anonymous function)  @ bootstrap 539ecc7…:39
webpackUniversalModuleDefinition  @ universalModuleDefinition:7
(anonymous function)  @ universalModuleDefinition:10

控制台中提供的index.js上的路径是webpack:///./~/pg/~/pgpass/lib/index.js:5

我尝试了@Renzo Poddighe解决方案，但仍然得到相同的错误。我认为这可能与和的讨论有关。他们说

// __dirname is not defined in webkit context, this is only node.js thing
console.log(__dirname); // undefined

及

__dirname在Node.js模块中工作，即在使用require（）调用的JavaScript代码中工作。 __dirname不仅仅在WebKit脚本中工作，也就是说，在用HTML调用的JavaScript代码中，或者在jQuery的$.getScript（）或任何其他类似方法中工作

有什么想法吗？让我知道我需要包括哪些其他信息

编辑

我想我的目标是

var config = {
  entry: { app: './src/index.jsx'},
  output: {
     libraryTarget: 'umd',
     path: path.join(__dirname, 'dist'),
     filename: '[name].js'
  }, ...

我的webpack.config.js看起来像：

...
  node: {
    console: true,
    __dirname: true,
    dns: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  }
...

---

在这种情况下，请将其添加到您的网页配置中：

{
  node: {
    __dirname: true
  }
}

---

这将告诉webpack用模块的路径替换

\u dirname

实例。此路径相对于

上下文

您的网页的目标是什么？web/node或其他东西我看到的唯一一个带有

target

的东西是

libraryTarget:'umd'，

。我应该明确地设置它吗？根据指向文档的链接，我的目标默认为web。尝试在webpack配置中指定

target:'node'

。尝试这样做，我反而得到了一个错误“UncaughtReferenceError:process is not defined ReactPerf.js:38”。我添加了它，但在重新启动我的webpack dev服务器后仍然得到相同的错误。如果有什么不同的话，我也在使用热重新加载程序。你有什么理由试图在web环境中使用

fs

和

pg

？Webpack有mock for node api，但另一方面，它是一个节点包。它可能会在后台使用一些节点api。我可能用了错误的方法，但我想为数据库创建一个web界面，以便非技术管理员可以添加、编辑和删除数据库中的条目。我想我需要包括pg才能做到这一点。我加入了fs以尝试修复错误，但这可能会带来更多。如果我没有包括dns、fs、tls、net，我会得到一个关于找不到模块的错误。你这样做是错误的。在pg上创建一个REST API，并从您的web应用程序中使用它。我在尝试为我的Electron应用程序设置自定义网页包时遇到了同样的问题。现在我得到一个错误：error vue.config.js中的无效选项不允许使用“节点”