Webpack warning in ReactJs

Question

Can anyone please explain, why I am getting this warning after npm start ?

Here's my 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"
    ]
  }
}

Here's a warning from webpack and I am getting this message all time after npm start.

enter image description here

after npm start

You can now view rou-lesson in the browser.

Local: http://localhost:3000
On Your Network: http://192.168.0.103:3000

Note that the development build is not optimized. To create a production build, use npm run 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

well, with npm run start, your are running a production server and its does not optimize your code for deployment. this message just tells you that the package is not optimized. if you want to deploy your app you have to build it first to optimize and minify your code. — MWO, Dec 18 '21 at 16:55

score 1 · Accepted Answer · answered Dec 19 '21 at 13:07

When you type "npm starts" in command line, webpack runs your code as "development" mode which means webpack doesn't optimize your code and run it in memory to run faster(it doesn't make optimized files as rusult in "development mode"). Webpack optimize your files when you run it as "production" mode. If you type "npm run build", webpack optimize all your code and make it some bundled files as a rusult. I think that message is just a warning message that webpack throw to remind user this automatically

Webpack warning in ReactJs

1 Answers1