output.publicPath

Concept:

Represents the root path of the assets to be referenced, effective in the production environment; It can be a relative path, it can be an absolute path;

output: {
	publicPath: "/dist/";
}
Copy the code

This configuration prefixes resource paths in tags such as

Note that this does not apply to static resources that you introduce manually

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Vue-webpack5</title>
  <! -- Manual static introduces a script that is not affected by publicPath -->
  <script src="https://polyfill.io/v3/polyfill.min.js? features=es6%2Ces7%2Ces2019%2Ces2018%2Ces2016%2Ces2017%2Ces2015%2Ces5%2Cdefault"></script>
</head>
<body>
  <div id="app"></div>
	<! -- here is where WebPack will inject js, add /dist/ prefix to the resource path -->
	<script defer="defer" src="/dist/app.3aad394f.js"></script>
</body>
</html>
Copy the code
Resource injection principles:

In Webpack, the plugin html-webpack-plugin is generally used to inject packaged JS and CSS into HTML templates. This plugin can also be passed a publicPath, which is used as follows:

// webpack.config.js
plugins: [
    new HtmlWebpackPlugin({
        publicPath: '/dist2/'.// Overwrite output.publicPath
        template: path.join(__dirname, "index.html"),  // The template file to inject
        filename: "index.html"  // The name of the last generated HTML file})]Copy the code

PublicPath is not configured in html-webpack-plugin. In production environment, it will read output.publicPath as the resource root path by default. This is why handwritten resources do not prefix their paths. This is because these resource files will only take effect if they are injected into the HTML template via the HTmL-Webpack-plugin.

Configuring priorities

If publicPath is configured in both output and html-webpack-plugin, htmL-webpack-plugin will prevail

Relative path and absolute path

If the configuration is relative, the import path of the resource is relative to your HTML file

If this parameter is set to an absolute path and does not contain a domain name, the system obtains resources from the current server. If this parameter is set to a CDN, you can set the full path.

Both relative and absolute paths carry a trailing slash/

publicPath: '/'.// Get resources relative to index.html
publicPath: '/assets/'.// Obtain resources from the root path of the current server
publicPath: 'https://cdn.example.com/assets/' / / get resources from https://cdn.example.com/assets/
Copy the code

The resources injected into the HTML in these three cases are as follows:

<script src="./app.js"></script>
<script src="/assets/app.js"></script>
<script src="https://cdn.example.com/assets/app.js"></script>
Copy the code
The default value

The default setting is’ auto ‘, and the following is an excerpt from the official explanation, which dynamically configures publicPath according to some custom rules

Chances that you don’t know what the publicPath will be in advance, and webpack can handle it automatically for you by determining the public path from variables like import.meta.url , Document.currentscript, script.src or self.location. What you need is to set output. PublicPath to ‘auto’

__webpack_public_path__

There is an official global parameter that dynamically sets the resource path, which is useful in micro fronts when the main application loads resources from different sub-applications.

In cases where the publicPath of output files can’t be known at compile time, it can be left blank and set dynamically at runtime in the entry file using the free variable

You only need to set it in your project entrance. Take the micro-front-end framework Qiankun as an example, you can dynamically set the publicPath delivered by the main application in the sub-application, so as to achieve the purpose of dynamically setting the resource path.

// The entry for the child application is main.js
if (window.__POWERED_BY_QIANKUN__) {
  / / set publicPath
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
/ /.. Other code
Copy the code

devServer.publicPath

concept

The config. DevServer parameter is used to start a fast local development server using webpack-dev-server. Unlike in a production environment, webPack does not pack execution files into a local folder, but instead stores them in memory. The meaning of devserver.publicPath is completely different from that of output.publicPath. It does not change the path of resources in HTML. It is similar to output.path, which is used to configure the server access path for front-end files.

  • Have to be/At the beginning,/At the end

  • If a relative path is configured, the server cannot access files and a blank page is displayed

An 🌰 :

devServer: {
    publicPath: '/assets/'
}
Copy the code

Start thewebpack-dev-serverAfter that, you need to access your local server like this:localhost:3334/assets/

Match the routing

Take vue-router as an example. When you set devserver. publicPath to /assets/, the corresponding route configuration needs to be changed. Otherwise, incorrect route redirection may occur.

const router = new VueRouter({
    base: "assets"./ /... Other configuration
})
Copy the code
The default value

The default value is /

output.path

concept

The output directory for Webpack files

The path must be an absolute path

The Output directory as an Absolute path

It has nothing to do with publicPath, it only has to do with which directory the front-end generates js files to be stored in

// webpack.config.js
output: {
	path: path.join(__dirname, "dist")}Copy the code