What is the development mode and production mode of webpack?

I have been studying webpack4, recently. To be honest, I am being tortured crazy and myself, because I like to study problems deeply, and it also brings me a lot of pain. For details, you can see my home page, recent questions (some questions that you may never think about).

well, what I want to ask is what exactly is the development mode and production mode of webpack? In other words, what does the development model do and what does the production model do?

some people definitely say that what is used for local development is the development mode. Mode is set to development, and some development configurations, such as devtool, hot updates, are the development mode. It is good that you can see the data in the local browser in time. This is the development mode.

but we"re thinking a little bit deeper, and we all know that webpack packaging depends on package.json, while package.json has a module devDependencies that places development pattern dependencies and a dependencies,package.json that places production pattern dependencies. What"s the relationship between a development pattern devDependencies,webpack.config.js and a development pattern mode:development, in devDependencies,webpack.config.js?

what does this webpack do when it is packaged? Some people say that it is not packaged into the final js, so please take a look at my premise. I put the jquery module in the devDependencies, and finally the packaged js can still run, indicating that the modules in the devDependencies are packaged into the js (no matter what value I set by mode)

to sum up my questions, as I said online, devDependencies is used for development mode packaging and dependencies is used for production mode packaging. I do not see the effect. I only see that no matter what the value of devDependencies and dependencies is, as long as there is a corresponding package in the node_modules folder, it can be successfully packaged in the end. Then what is the significance of devDependencies for development mode packaging and dependencies for production mode packaging? what exactly does it mean on the Internet? where do I misunderstand?

Finally, there is a question, even if what is said on the Internet is true, devDependencies is used for development mode packaging, dependencies is used for production mode packaging, then the webpack module I put in devDependencies can not be used for production mode, how can you package it? 

{
  "name": "vuetest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^0.1.19",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.16.5",
    "webpack-cli": "^3.1.0"
  },
  "dependencies": {
    "jquery": "^3.3.1"
  }
}

Webpack4 webpack
Apr.19,2021
devDependencies and dependencies in

package.json are mainly used to distinguish between environments.

for example, a Node project, in the development environment, you can need some front-end dependencies, such as webpack , eslint , and so on, so we will drop these in devDependencies .
then wait until the project is ready to go online and deploy to the online environment. In fact, you don't need such crap as webpack , eslint , but only the third-party packages that code execution depends on, such as moment , koa , and so on, so we put it in dependencies .

so what's the difference between the two?

when developing locally, the installation dependency executes npm install , which installs all dependencies.
while in the online environment, execute npm install-- production , which will cause Filter to drop the dependencies in devDependencies . :)

so it feels as if your doubts have gone astray.

npm install | docs

With the-- production flag (or when the NODE_ENV environment variable is set to production), npm will not install modules listed in devDependencies.

package.json is related to npm, it is not directly related to webpack , webpack packaging behavior processing depends on webpack configuration file .

dependencies and devDependencies , the most significant difference is:

  • if your project is published on npm as a npm package , and someone else npm install uses your package, then only modules under
    dependencies will be downloaded as dependencies.
  • if you are working on this project as an author, the modules under dependencies and devDependencies will be downloaded as dependencies.

back to the relationship between npm and webpack , you can define the relevant execution commands through the scripts field of package.json . Depending on what your code writes build: webpack , you can execute npm run build , which is essentially the same as executing webpack on the command line.

gives people a feeling of enthusiasm and inappropriate methods

Don't Baidu, it's all bullshit. Check out official document . Chinese version is also available.

in a word, it has nothing to do with package.json . mode just defines the commonly used optimizations:

  • if you want to use the usual production optimization, write production
  • if you want to use common development optimizations, write develop
  • write none if you want to specify it yourself or if you don't want to use it at all.

whether it is "commonly used" or not is all preordained by the webpack team.

I have the same doubts.

Previous: After uploading a picture using the fileupload.js plug-in, click to delete the picture and cannot delete it.

Next: Date component el-date-picke data format issues

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b365ec-2c015.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b365ec-2c015.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?