为什么没有这些模块我的 webpack (react) 不能构建？

Question

我尝试在新项目开始时安装 webpack，并且尝试忽略 package.json 中的模块。我的 webpack 在构建时出现了 19 个错误，每个错误都对应于一个既未安装也没有必要的模块。我用谷歌搜索了几个不同的查询，但我只出现了 a) make polyfill 或 b) 将 resolve fallback 设置为 false。我相信我用缓冲模块做了一个适当的 polyfill，并将其余有问题的模块设置为 false。

错误：

> npx webpack -w

assets by status 0 bytes [cached] 1 asset

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ERROR in main
Module not found: Error: Can't resolve './src' in '/Users/slick/Documents/Work/freelance/stacks-scales2'
resolve './src' in '/Users/slick/Documents/Work/freelance/stacks-scales2'
  using description file: /Users/slick/Documents/Work/freelance/stacks-scales2/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /Users/slick/Documents/Work/freelance/stacks-scales2/package.json (relative path: ./src)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /Users/slick/Documents/Work/freelance/stacks-scales2/src doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /Users/slick/Documents/Work/freelance/stacks-scales2/src.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /Users/slick/Documents/Work/freelance/stacks-scales2/src.json doesn't exist
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        /Users/slick/Documents/Work/freelance/stacks-scales2/src.wasm doesn't exist
      as directory
        /Users/slick/Documents/Work/freelance/stacks-scales2/src doesn't exist

webpack 5.62.1 compiled with 1 error and 1 warning in 225 ms
assets by status 606 KiB [cached] 1 asset
runtime modules 432 bytes 3 modules
javascript modules 564 KiB
  modules by path ./node_modules/ 564 KiB 56 modules
  ./src/index.js 407 bytes [built] [code generated]
  http (ignored) 15 bytes [built] [code generated]
  ./streams (ignored) 15 bytes [built] [code generated]
  ./extend-node (ignored) 15 bytes [built] [code generated]
json modules 261 KiB
  modules by path ./node_modules/iconv-lite/ 86.7 KiB 8 modules
  ./node_modules/mime-db/db.json 142 KiB [built] [code generated]
  ./node_modules/statuses/codes.json 1.54 KiB [built] [code generated]
  ./node_modules/mime/types.json 30.8 KiB [built] [code generated]

WARNING in ./node_modules/express/lib/view.js 81:13-25
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/express/lib/application.js 22:11-28
 @ ./node_modules/express/lib/express.js 18:12-36
 @ ./node_modules/express/index.js 11:0-41
 @ ./src/index.js 1:16-34

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

1 warning has detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

ERROR in ./node_modules/body-parser/lib/read.js 18:11-26
Module not found: Error: Can't resolve 'zlib' in '/Users/slick/Documents/Work/freelance/stacks-scales2/node_modules/body-parser/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }'
        - install 'browserify-zlib'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "zlib": false }
 @ ./node_modules/body-parser/lib/types/raw.js 15:11-29
 @ ./node_modules/body-parser/index.js 145:15-41
 @ ./node_modules/express/lib/express.js 15:17-39
 @ ./node_modules/express/index.js 11:0-41
 @ ./src/index.js 1:16-34

...

19 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.62.1 compiled with 19 errors and 2 warnings in 5377 ms

这似乎经常在 package.json 中解决，但它并不适用于所有这些：

  "resolve": {
    "fallback": {
      "fs": "false",
      "crypto": "false",
      "zlib_bindings": "false",
      "zlib": "false",
      "stream": "false",
      "url": "false",
      "querystring": "false",
      "http": "false",
      "net": "false",
      "buffer": "resolve.require('buffer')"
    }
  },
  "mode": "development",
  "scripts": {
    "start": "npx src/index.jsx",
    "build": "npx webpack -w"
  },
  "dependencies": {
    "@material-ui/core": "^4.12.3",
    "buffer": "^6.0.3",
    "compression": "^1.7.4",
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "mysql": "^2.18.1",
    "path": "^0.12.7",
    "react": "^17.0.2",
    "webpack": "^5.62.1"
  },
  "devDependencies": {
    "webpack-cli": "^4.9.1"
  }
}

服务器非常基础，因为它是一个基础站点：

const compression = require('compression');
const cors = require('cors');
const path = require('path');

const app = express();
const port = 3030;

app.use(compression());
app.use(express.static(path.join(__dirname, '../dist')));
app.use(cors());

app.get('/', (req, res) => {
  res.send();
});

app.listen(port, () => {
  console.log(`Listening on port ${port}...`);
});```

Answer 1

我没有创建或配置 webpack.config.js。好久不见了