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.jsStore configurations shared by development and production;
  • webpack.dev.jsA separate configuration for storing development;
  • webpack.prod.jsA 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 thechunksThe following information is displayed:

Our dist directory does generate the three files shown in the diagram,assetsIs a static resource,WarningsThe warnings that are triggered when we pack are displayed here,ErrorsThe 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.