ReactJs 中的 Webpack 警告

Question

谁能解释一下，为什么我在 npm start 之后收到此警告？

这是我的 package.json

{
  "name": "rou-lesson",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

这是来自 webpack 的警告，我在 npm 启动后一直收到此消息。

enter image description here

npm 启动后

您现在可以在浏览器中查看rou课程了。

本地：http://localhost:3000
在您的网络上：http://192.168.0.103:3000

请注意，开发版本并未优化。要创建生产版本，请使用 npm 运行 build.

> assets by path static/ 1.52 MiB   asset static/js/bundle.js 1.51 MiB
> [emitted] (name: main) 1 rela   asset
> static/js/node_modules_web-vitals_dist_web-vitals_js.chunk   asset
> static/media/logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg 2.5 asset
> index.html 1.67 KiB [emitted] asset asset-manifest.json 546 bytes
> [emitted] runtime modules 31.4 KiB 16 modules modules by path
> ./node_modules/ 1.38 MiB 95 modules modules by path ./src/ 18.1 KiB  
> modules by path ./src/*.css 8.82 KiB
>     ./src/index.css 2.72 KiB [built] [code generated]
>     ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].ones??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-lode
> generated]
>     ./src/App.css 2.72 KiB [built] [code generated]
>     ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].ones??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-lenerated]
> modules by path ./src/*.js 5.71 KiB  KiB [built] [code generated]
> webpack 5.65.0 compiled successfully in 12201 ms

Answer 1

当您在命令行中键入“npm starts”时，webpack 运行将您的代码设置为“开发”模式，这意味着 webpack 不会优化您的代码并且运行它会在内存中运行更快（它不会像“开发模式”中那样生成优化文件）。当您运行将其作为“生产”模式时，Webpack 会优化您的文件。如果你输入“npm 运行 build”，webpack 会优化你所有的代码，并将其打包成一些文件作为结果。我认为该消息只是 webpack 抛出的一条警告消息，用于自动提醒用户

ReactJs 中的 Webpack 警告

Webpack warning in ReactJs

javascript

reactjs

webpack-dev-server