The page does not display the issue after the NPM run build has been packaged

This morning Ops small brother came to me, want to send a version of my new project, I still follow the general process NPM run build and then git submit, hit a tag v1.0.1, Yun small brother said your front page did not write well.

Emmmm .... I've written it all. There must be something wrong, I opened it and there was a problem.

Sure enough, nothing at all. Do not worry, first look at the console error.

Say Xxxnot FOUND, most likely is a path problem.

Gossip doesn't say much, I'll try it first.

Under the Config folder there is a index.js, open there is a Build object, Assetspublicpath field, it is '/' changed to './', then NPM Run build, open dist below the index.html, sure enough. I guess it's right.

But am I proud of you? Am I frivolous? And not. Take a closer look at the principle.

Instruction Analysis

In the Package.json file.

"Scripts": {
    "dev": "Webpack-dev-server--inline--progress--config build/webpack.dev.conf.js",
    "Build": " Node Build/build.js "
  }

These two instructions mean: The Build/dex-server.js file is executed when running NPM run Dev, and the Build/build.js file build folder Analysis is executed when running NPM run build Build/dev-server.js

NPM Run Dev Executes the file Build/dev-server.js file, performed: Check node and NPM versions to introduce related plugins and configurations to create Express server and Webpack compiler configuration development middleware ( Webpack-dev-middleware) and hot-load middleware (webpack-hot-middleware) Mount Agent service and middleware configuration static resources boot server Listener specific window (8080) Automatically open a browser and open a specific URL (localhost:8080)

Description: The express server is providing a static file service, but it also uses Http-proxy-middleware. An HTTP request agent middleware, the front-end development process needs to use the background of the API, you can configure the proxytable to the corresponding background request proxy to the dedicated API server. Build/webpack.base.conf.js

The Webpack configuration that Dev-server relies on is the Webpack.dev.conf.js file, and the test environment uses webpack.base.conf.js,webpack.dev.conf.js and references webpack.base.conf.js,w Ebpack.base.conf.js mainly completed the following things: Configure Webpack compile the Portal Configuration Webpack output path and Clear Rule Configuration module resolve rules Configure the processing rules for different types of modules
This configuration only configures the processing rules for. js,. Vue, pictures, fonts, and so on, if a processor is needed her files can be configured in Module.rules. Build/webpack.dev.conf.js

On the basis of webpack.base.conf.js to improve the configuration under the development environment, mainly including the following several things: add Hot-reload-related code to entry CHUNKD merge base webpack configuration using Styleloaders Configure the source Maps configuration Webpack Operations build/check-versions.js and Build/dev-client.js

Finally, the two simpler 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 and Build/vue-loader.conf.js

Webpack configuration file used in the Utils.js and Vue-loader these two files, Utils mainly complete the following three things: Configure static resource path generation Cssloaders used to load the style in the. Vue file Generate styleloaders to load a separate style file that is not in the. vue file

Vue-loader.conf only configures the CSS loader and automatically adds prefixes after compiling the CSS. Build/build.js

Configuration under Build environment, Build.js mainly completes the following several things: Loading animation Delete Create destination folder Webpack Compile output information build/webpack.prod.conf.js

The Webpack configuration used in the build comes from Webpack.prod.conf.js, which is also further improved on the basis of webpack.base.conf. Here are a few things to do mainly:
-Webpack configuration with consolidated base
-Using Styleloaders
-Configure the output of the Webpack
-Configure the Webpack plugin
-Webpack plug-in configuration in gzip mode
-Webpack-bundle Analysis

Description: Webpack plug-in inside more smear compression code and pull away from CSS files and other plug-ins. Config folder analysis Config/index.js

Config folder under the most important file is Index.js, in here to describe the development and construction of the two environments, the previous build folder also has a lot of files referenced in the index.js inside the configuration. config/dev.env.js, config/prod.env.js and Config/test.env.js

These three files simply set the environment variable, nothing special. This is the basic introduction of Webpack, Webpack there are many plugins, but also need to explore. Write the source code explanation of these several documents behind.

Article Reference https://www.cnblogs.com/hl0203/p/7138600.html