This is the 7th day of my participation in Gwen Challenge
Development mode and Production mode distinguish packaging
Development mode and production mode, what are they used for?
When we develop a project, we usually use the development environment to develop the project. In this packaging environment, we use devServe in WebPack to help us build a server. Then there are features like HMR integrated into the server, which will help me repackage as soon as I change the code. The content of our code will be displayed on the corresponding webpage in real time. Therefore, in the development environment, it is very convenient for us to use the development mode. However, once our source code development is completed, we need to package the code and put it online. At this time, we need the mode of Production.
1. First of all, source map is very comprehensive in the development environment, which can help us quickly locate code problems in the development environment. However, in the production environment, the code is already online, so the Source map is not so important. Therefore, in the online environment at this time, the source map will be more concise.
2. In a development environment, our code is usually packaged and generated without compression, because in a development environment, we want our code to be uncompressed. You can see the contents of the package generated code and, more obviously, see some of the details inside. However, once our code is ready to go online, we hope that our code can be compressed, so the code in production mode is generally compressed.
configuration
First we create a new build directory and create three files as follows:
- build
- webpack.common.js
- webpack.dev.js
- webpack.prod.js
Copy the code
webpack.common.js
Store configurations shared by development and production;webpack.dev.js
A separate configuration for storing development;webpack.prod.js
A separate configuration for production;
The three files are configured as follows:
// webpack.common.js
module.exports = {
entry: {}...output: {}}Copy the code
// webpack.dev.js
const webpack = require('webpack');
const merge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');
const devConfig = {
mode: 'development'.devServer: {
contentBase: './dist'.open: true.port: 8080.hot: true},... }module.exports = merge(commonConfig, devConfig);
Copy the code
// webpack.prod.js
const webpack = require('webpack');
const merge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');
const prodConfig = {
mode: 'production'.optimization: {
minimizer: [new OptimizeCSSAssetsPlugin({})]
},
...
}
module.exports = merge(commonConfig, prodConfig);
Copy the code
Webpack-merge merges common configurations and configurations in different modes.
Then modify the package.json run command as follows:
"scripts": {
"dev": "webpack-dev-server --config ./build/webpack.dev.js"."build": "webpack --config ./build/webpack.prod.js"
}
Copy the code
To execute dev, run webpack.dev.js, and to execute build, run webpack.prod.js.
Packaging analysis
Webapck provides a git repository for analysis tools, which we need to configure in package.json:
"scripts": {
"dev-build": "webpack --profile --json > stats.json --config ./build/webpack.dev.js"."dev": "webpack-dev-server --config ./build/webpack.dev.js"."build": "webpack --config ./build/webpack.prod.js"
}
Copy the code
–profile –json > stats.json –profile — stats.json — stats.json –profile — stats.json — stats.json — stats.json — stats.json — stats.json — stats.json — stats.json — stats.json — stats.json — stats.json — stats.json — stats.json
Enter thechunks
The following information is displayed:
Our dist directory does generate the three files shown in the diagram,assets
Is a static resource,Warnings
The warnings that are triggered when we pack are displayed here,Errors
The warnings that are triggered when we pack are displayed here;
conclusion
Webpack provides a wide range of tools for packaging analysis. Here is only one of them.