I understand it
- ContentBase is the path to static resources, such as our template index.html, which defaults to the project root.
- PublicPath, the package output directory of Webpack. The package result will add this prefix to the resource path. The default is publicPath
/
.
example
Note that the following examples do not use the webpack-html-plugin, but instead add resources manually
For example, our static files are now placed under the public folder in the project root directory, as shown below:
Configuration 1
- configuration
ContentBase and publicPath are not configured, that is, the default values are used
devServer: {},
Copy the code
- run
- access
http://localhost:8080/
Continue to visit http://localhost:8080/public
Check the path to main.js in index.html:
Using a relative path, found it request to http://localhost:8080/public/main.js, so we guess resources if using a relative path is relatively contentBase (note that this is just a guess. The default value of publicPath is /, so we add the prefix to the resource and change the path of main.js in index.html as follows:
You can access it now.
The configuration of 2
- configuration
Configure contentBase as the path to the static file
devServer: {
contentBase: './public'
}
Copy the code
- run
- access
http://localhost:8080/
main.js
Absolute path of
main.js
Relative path of
Surprised, found that don’t add publicPath prefix can normal visit, equivalent to visit http://localhost:8080/main.js, show in front of us guess “resource if you use a relative path is relatively contentBase” is wrong, [Fixed] “Resource if relative path is relative browser URL”, in this example the browser URL is http://localhost:8080/, because publicPath is not set to/by default, . So the main js file location on http://localhost:8080/main.js, so the above use relative path. The main js can access to success. So in configuration 1, if you use a relative path to access the main.js file, it should be.. / mian. Js (because the access path for http://localhost:8080/public/), modify the configuration for the configuration 1, retesting is as follows:
The test was successful.
Configuration 3
- configuration
Configure both contentBase and publicPath
devServer: {
contentBase: './public'.// A directory that represents static resources, such as the template index.html
publicPath: '/dist' // Indicates that the development environment packages the output directory, virtual directory, resource path before this path
},
Copy the code
- run
- access
http://localhost:8080/
The following uses relative and absolute paths to import resources (same below)
The same as configuration 2.
Of course, you can configure it this way.
devServer: {
contentBase: './public'.// A directory that represents static resources, such as the template index.html
publicPath: '/aaa/bbb/ccc' // Indicates that the development environment packages the output directory, virtual directory, resource path before this path
},
Copy the code
The resource access path is /aaa/ BBB/CCC /mian.js or aaa/ BBB/CCC /main.js
With 4
- configuration
devServer: {
publicPath: '/dist' // Indicates that the development environment packages the output directory, virtual directory, resource path before this path
},
Copy the code
- run
- access
According to the knowledge in front of us, we are going to visit success is sure to http://localhost:8080/public/, how do you write so our resource path? Two methods:
- Absolute path: Be honest
/${publicPath}/ Resource path
- Relative path: we assumed relative to the browser URL, in this case it should be
'.. /dist/main.js'
Test successful!
conclusion
- When absolute paths are used, publicPath is the prefix of the resource
- Use relative paths, which are relative browser urls
- Using absolute paths, the root path in the resource represents http://xxxx:xxxx/
The above is my own practice, if there is something wrong, please give me more advice.