Home > Article > Web Front-end > PublicPath path problems and solutions examples

PublicPath path problems and solutions examples

零下一度Original: 2017-06-19 09:21:242266browse

This article mainly introduces you to the relevant information about the publicPath path problem in the webpack learning tutorial. The article introduces it in detail through the example code, which has certain reference and learning value for everyone. Friends who need it can take a look below. .

This article mainly introduces to you the relevant content about the publicPath path problem in webpack, and shares it for your reference and study. Let’s take a look at the detailed introduction:

output: {
  filename: "[name].js",
  path:path.resolve(dirname,"build")
 }

If publicPath is not specified, the import path is as follows

<body>
 <script src="b.js"></script>
</body>

If publicPath is specified

output: {
  filename: "[name].js",
  path:path.resolve(dirname,"build"),
  publicPath:"/assets/"
 }

, then import As follows

<body>
 <script src="assets/b.js"></script>
</body>

In the webpack-dev-server environment, path, publicPath, differences and connections

path: just specify the compilation directory (/build /js/), cannot be used for jsreference in html.

publicPath: virtual directory, automatically points to the path compilation directory (/assets/ => /build/js/). When referencing js files in html, this virtual path must be quoted (but it actually refers to the file in memory, neither /build/js/ nor /assets/).

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

Publish to the production environment:

1. Compile with webpack (of course compiled to /build/js/)

2. Copy all the files in the compilation directory (/build/js/) to the /assets/ directory (note: do not modify the path referencing bundle.js in index.html)

Previously, webpack-dev-server could not refresh automatically due to the wrong path of publicPath

The above is the detailed content of PublicPath path problems and solutions examples. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Problems and solutions to errors reported when accessing the page after webpack packagingNext article：Problems and solutions to errors reported when accessing the page after webpack packaging

See more

PublicPath path problems and solutions examples

Related articles