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

  1. configuration

ContentBase and publicPath are not configured, that is, the default values are used

 devServer: {},
Copy the code
  1. run

  1. accesshttp://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

  1. configuration

Configure contentBase as the path to the static file

devServer: {
    contentBase: './public'
}
Copy the code
  1. run

  1. accesshttp://localhost:8080/
  • main.jsAbsolute path of

  • main.jsRelative 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

  1. 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
  1. run

  1. accesshttp://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

  1. configuration
devServer: {
        publicPath: '/dist' // Indicates that the development environment packages the output directory, virtual directory, resource path before this path
    },
Copy the code
  1. run

  1. 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:

  1. Absolute path: Be honest/${publicPath}/ Resource path
  2. Relative path: we assumed relative to the browser URL, in this case it should be'.. /dist/main.js'

Test successful!

conclusion

  1. When absolute paths are used, publicPath is the prefix of the resource
  2. Use relative paths, which are relative browser urls
  3. 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.