Base
Packaging essence
The essence is nodejs to execute webpack scripts, and the webpack script compiles the project files as necessary (commonly speaking, string processing), and then outputs them to a certain directory
from and require
The require in webpack-related scripts are not the same as the require function used in our front-end js file. Its require is the keyword of nodejs.
In the front-end js file, the required used is equivalent to a keyword defined by webpack at compile time, and the runtime is a function provided by webpack. The main abilities are: complete import, the parameters can omit some suffix names (need to configure), import the directory when they are directory, use alias (alias, need to configure), import pictures (actually imported as base64 encoded strings), and provide information to each loader for processing through compilation to obtain various loading and import functions. import from is a syntactic sugar provided by webpack, which can be regarded as a combination of const xx=require(xxxx).
Modular processing parsing configuration
That is, webpack resolve configuration:Resolve
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@': resolve('src'),//This resolve is usually a nodejs function defined outside, used to generate an absolute path '@assets': resolve('src/assets')
}
},
The alias and extensions mentioned above can be configured here.
As for the path parameters in the require function, the specific analysis rules are as follows:How to parse code module paths in webpack
1. Analyze the relative path
Find out whether there are corresponding files or folders under the path relative to the current module
It is a file and load it directly
If it is a folder, continue to search for files under the folder.
If there is a file, search for the file according to the file name of the main field in the file.
None or No main field looks for the file.
2. Resolve the module name
Find the node_modules folder in the current file directory, the parent directory and above directory to see if there is a module with the corresponding name
3. Resolve the absolute path
Directly find the corresponding path file
text
1. Image processing and path conversion
Generally handled by url-loader and file-loader.
url-loader
This is simple, converting the small image into a base64 encoding and returning the base64 encoding string. That is, in the js code var jpg=require('./assets/'), if the image can be found during compilation and the image size is less than the specified value, then the url-loader returns the base64 encoding of the image, and the value of the variable jpg will be the base64 encoding of the image.
file-loader
The file-loader will process the large images that the url-loader does not process. It will copy the images to the specified directory and return the public URL (seefile-loader documentation), represents the url path string of the image when it is compiled and runs. That is, in the js code var jpg=require('./assets/'), if the image can be found during compilation, the value of jpg will be /img/ (depends on the configuration)
Differences in the current directory./
Note that the current paths of css and js and html are inconsistent. The ./ of css refers to the path where the css file is located, while the ./ in js and html refers to the path directory of the url in the browser's current address bar.
, js, css processing
Just use the require function in js. Here I will talk about the processing in html and css.
In html, the process (synthetic sugar) is provided by vue-loader. Under its default options, the src attributes of the video, img, and source tags will be placed into the require function and the result will be replaced to the original position. That is: vue-loader extracts these tags src attributes ->require function ->file-loader or url-loader processing ->replaces with return values. Similarly, you can turn right to search for vue-loader transformToRequire. You can expand it so that other tag properties also have the syntax sugar.
In css, the processing is provided by css-loader. Similar to the above html, css-loader will process url(./assets/) into url(/img/), and also obtain the processing results through the require function.
Note that in html and css, the writing method of absolute paths will not be processed (loader judgment), that is, the url (/assets/) will not change after compilation. When compiling requires('/assets/') in js, it will be considered as packaging the /assets/ file in the local disk, and when it does not exist, it will compile and report an error.
3. Advanced: Use of alias
That is, the modular processing of webpack mentioned above, such as @/assets/ in js.
In html: It can be used directly or can be used ~ indicates that webpack is a module path, i.e.src='@/assets/'orsrc='~@/assets/'All are feasible
In css, you must use ~ to indicate that webpack is a module path, i.e. url(~@/assets/)
In js, you don’t need to write ~, webpack must use module path analysis for it.
At the same time, note that the part of the alias string needs to be included directly in the parameters. Right now
let number=1, p1='./', p2='@assets'
=require(`./assets/img${number}.jpg`)//correct=require(`@assets/img${number}.jpg`)//correct=require(`${p1}assets/img${number}.jpg`)//correct
=require(`${p2}/img${number}.jpg`)//mistake
I don't know if this is a bug or something. If you understand it, you can tell me.
and history mode
It should be known that in hash modes such as http://localhost/#/a/b/c, both html and js./ are http://localhost/. In history mode such as http://localhost/a/b/c, both html and js./ are http://localhost/a/b/. If you set publicPath: './' at this time, please note that the ./ in css starts from the directory where the css file is located, and the loader will uniformly process the paths of the src and css url functions of the html tag. At this time, one party may not find the picture due to the difference in the current directory ./ of the html and css.
The solution is simple. In history mode, publicPath should not be manually used to manually use the relative path, html or css, one of which should be written manually bypassing the loader processing. The logic can be clarified, and the processing methods are diverse.
5. Frequently Asked Questions
I don't understand the option settings of file-loader in the @vue/cli project, and I don't understand how to indirectly set the option settings of file-loader in various webpack templates.
The solution depends on yourself, or turn right to Baidu, maybe just copy it and set publicPath for file-loader: './' just match the project structure and solve the problem
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.