The page is blank after react is packaged

Instruction analysis
package.json file

 "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "build": "node build/build.js"
  }

The meaning of these two instructions:

• The file npm run dev is executed when it is running build/dex-server.js,
• Run npm run build time execution is build/build.jsfile

Build folder analysis
build/dev-server.js

The file build/dev-server.js file executed by npm run dev executed:

1. Check node and npm version
2. Introduce related plug-ins and configurations
3. Create express server and webpack compiler
4. Configure development middleware (webpack-dev-middleware) and hot reload middleware (webpack-hot-middleware)
5. Mount proxy service and middleware
6. Configure static resources
7. Start the server to listen to a specific window (8080)
8. Automatically open the browser and open the specific URL (localhost:8080)

说明：express服务器是提供静态文件服务，不过它还使用了http-proxy-middleware。
一个http请求代理的中间件，前端开发过程中需要使用到后台的API的话，
可以通过配置proxyTable来将相应的后台请求代理到专用的Api服务器。

配置webpack编译入口
配置webpack输出路径和明明规则
配置模块resolve规则
配置不同类型模块的处理规则 
这个配置里面只配置了.js 、.vue、图片、字体等几类文件的处理规则额，如果需要处理器她文件可以在 module.rules里面配置。

build/webpack.base.conf.js

The webpack configuration that dev-server relies on is the webpack.dev.conf.js file, webpack.base.conf.js is used in the test environment, and webpack.base.conf.js is referenced in webpack.dev.conf.js, webpack.base.conf.js mainly accomplishes the following things:

1. Configure webpack compilation entry
2. Configure webpack output path and clear rules
3. Configure module resolve rules
4. Configure processing rules for different types of modules 

This configuration only configures the processing rules for several types of files such as .js, .vue, pictures, fonts, etc. If you need to process the files, you can configure them in module.rules.
build/webpack.dev.conf.js
adds and improves the configuration of the development environment on the basis of webpack.base.conf.js, mainly including the following things:

• Add hot-reload related code to entry chunkd
• Merge basic webpack configuration
• Use styleLoaders
• Configure Source Maps
• Configure webpack operation
• build/check-versions.js和build/dev-client.js
• Finally, there are two relatively simple files under the build folder, 
• dev-client.js does not seem to be used, and the code is relatively simple. 
• check-version.js completes the version detection of node and npm.

build/utils.js和build/vue-loader.conf.js

The two files utils.js and vue-loader are used in the webpack configuration file. Utils mainly completes the following three things:

1. Configure static resource path
2. Generate cssloaders for loading styles in .vue files
3. Generate styleLoaders to load separate style files that are not in the .vue file

vue-loader.conf only configures the css loader and automatically adds the prefix after compiling css.

build/build.js

In the configuration of the build environment, build.js mainly accomplishes the following things:

1. loading animation
2. Delete the creation target folder
3. webpack compilation
4. Output information

build/webpack.prod.conf.js

The webpack configuration used in the build comes from webpack.prod.conf.js, which is also a further improvement on the basis of webpack.base.conf.

Mainly complete the following things: 

1. -Merge basic webpack configuration 
2. -Use styleLoaders 
3. -Configure webpack output 
4. -Configure webpack plugin 
5. -Webpack plugin configuration in gzip mode 
6. -webpack-bundle analysis

Note: There are more plug-ins such as ugly compression code and extracting css files in the webpack plug-in.

config folder analysis
config/index.js The
most important file in the config folder is index.js, which describes the configuration of development and build environments. There are also many files in the previous build folder. The configuration inside index.js.

The three files config/dev.env.js, config/prod.env.js and config/test.env.js simply set the environment variables, nothing special. This is a basic introduction to webpack. There are many plugins for webpack that need to be explored. The source code explanation of these files will be written later.