Core concepts of webpack

Time:2021-4-18

1、 Mode

1. Development mode
The — dev instruction of the package management tool means that the package is installed in the modifier.
2. Production mode

2、 Entrance and exit

Entry: the packaged entry file for all resources
Exit: control the position of all entry files after packing

3、 Loader

4、 Plug in

5、 Packaging deployment path problem,

1. Although webpack supports the modularization of AMD and CMD, we should pay attention to the use of AMD in general business code, and the use of CMD in webpack configuration.
1) We should pay attention to the use of webpack configuration. The syntax is based on node, so we need to pay special attention to the use of path./ / ../The difference between them.

/Represents a deployment on the root path of the server.
./Represents the path deployed under the current file of the server.

① Case: front end history routing mode using webapck DLL extraction public library problem.

In the history routing mode, the server is configured with 404 forwarding to index.html ,
When you press F5 to refresh, the index.html Reload static resources.
Core concepts of webpack
The plug-in add asset HTML webpack plugin can dynamically import script, and the above configuration plug-in will be generated in HTMLCore concepts of webpack
Core concepts of webpack
Under the above configuration, the plug-in will be generated in HTMLCore concepts of webpack
In both cases, the script tag is in the history routing mode, when the browser presses F5 to refresh.
/vendor/ vendor.dll.js Loading resources is in the server root path (the full path is the server root path + / vendor)/ vendor.dll.js )I’ll look for it next time.
And. / vendor/ vendor.dll.js The current path refers to the root path of the server plus the front-end route. The complete path is the root path of the server plus the front-end route + / vendor/ vendor.dll.js )Resource not found

② Principle:

If the browser input isexample.com/some/pathAfter pressing F5 to refresh, the runtime of the webpack will assume that it is in theexample.com/some/path. So webpack load vendor.dll.js It turns intoexample.com/some/path/vendor/vendor.dll.jsSuch a path;
however vendor.dll.js What is the real path to successexample.com/vendor/vendor.dll.js
https://blog.csdn.net/weixin_…

Recommended Today

Deeply analyze the principle and practice of RSA key

1、 Preface After experiencing many dark moments in life, when you read this article, you will regret and even be angry: why didn’t you write this article earlier?! Your darkest moments include: 1. Your project needs to be connected with the bank, and the other party needs you to provide an encryption certificate. You have […]