Javascript Webpack 中的“publicPath”有什么作用？

What does "publicPath" in Webpack do?

提问by Misha Moroshko

Webpack docsstate that output.publicPathis:

Webpack 文档指出output.publicPath：

The output.pathfrom the view of the JavaScript.

在output.path与JavaScript的视图。

Could you please elaborate on what this actually means?

您能否详细说明这实际上意味着什么？

I use output.pathand output.filenameto specify where Webpack should output the result, but I'm not sure what to put in output.publicPathand whether it is required.

我使用output.path和output.filename来指定 Webpack 应该在哪里输出结果，但我不确定要放入什么output.publicPath以及是否需要。

module.exports = {
  output: {
    path: path.resolve("./examples/dist"),
    filename: "app.js",
    publicPath: "What should I put here?"   
  } 
}

回答by Kevin Law

output.path

output.path

Local disk directory to store all your output files (Absolute path).

用于存储所有输出文件的本地磁盘目录（绝对路径）。

Example:path.join(__dirname, "build/")

例子：path.join(__dirname, "build/")

Webpack will output everything into localdisk/path-to-your-project/build/

Webpack 会将所有内容输出到 localdisk/path-to-your-project/build/

---

---

output.publicPath

output.publicPath

Where you uploaded your bundled files. (Relative to server root)

您上传捆绑文件的位置。（相对于服务器根）

Example:/assets/

例子：/assets/

Assumed you deployed the app at server root http://server/.

假设您在服务器 root 部署了应用程序http://server/。

By using /assets/, the app will find webpack assets at: http://server/assets/. Under the hood, every urls that webpack encounters will be re-written to begin with "/assets/".

通过使用/assets/，应用程序将在以下位置找到 webpack 资产：http://server/assets/。在后台，webpack 遇到的每个 url 都会被重写为以“ /assets/”开头。

src="picture.jpg"Re-writes ? src="/assets/picture.jpg"

Accessed by: (http://server/assets/picture.jpg)

---

src="/img/picture.jpg"Re-writes ? src="/assets/img/picture.jpg"

Accessed by: (http://server/assets/img/picture.jpg)

src="picture.jpg"重写？ src="/assets/picture.jpg"

访问者： ( http://server/assets/picture.jpg)

---

src="/img/picture.jpg"重写？ src="/assets/img/picture.jpg"

访问者： ( http://server/assets/img/picture.jpg)

回答by Johannes Ewald

When executed in the browser, webpack needs to know where you'll host the generated bundle. Thus it is able to request additional chunks (when using code splitting) or referenced files loaded via the file-loaderor url-loaderrespectively.

在浏览器中执行时，webpack 需要知道您将在哪里托管生成的包。因此，它能够请求额外的块（当使用代码拆分时）或分别通过file-loader或url-loader 加载的引用文件。

For example: If you configure your http server to host the generated bundle under /assets/you should write: publicPath: "/assets/"

例如：如果您将 http 服务器配置为托管生成的包，/assets/您应该编写：publicPath: "/assets/"

回答by Sean

the publicPath is just used for dev purpose, I was confused at first time I saw this config property, but it makes sense now that I've used webpack for a while

publicPath 仅用于开发目的，我第一次看到这个配置属性时很困惑，但是现在我已经使用 webpack 一段时间了

suppose you put all your js source file under srcfolder, and you config your webpack to build the source file to distfolder with output.path.

假设你把你所有的JS源文件下的src文件夹，并且配置你的WebPack源文件建立到dist文件夹output.path。

But you want to serve your static assets under a more meaningful location like webroot/public/assets, this time you can use out.publicPath='/webroot/public/assets', so that in your html, you can reference your js with <script src="/webroot/public/assets/bundle.js"></script>.

但是您想在更有意义的位置下提供您的静态资产，例如webroot/public/assets，这次您可以使用out.publicPath='/webroot/public/assets'，以便在您的 html 中，您可以使用<script src="/webroot/public/assets/bundle.js"></script>.

when you request webroot/public/assets/bundle.jsthe webpack-dev-serverwill find the js under the dist folder

当您请求webroot/public/assets/bundle.js该webpack-dev-server会发现dist文件夹下的JS

Update:

更新：

thanks for Charlie Martin to correct my answer

感谢查理马丁纠正我的答案

original: the publicPath is just used for dev purpose, this is not just for dev purpose

原文：publicPath 仅用于开发目的，这不仅仅是用于开发目的

No, this option is useful in the dev server, but its intention is for asynchronously loading script bundles in production. Say you have a very large single page application (for example Facebook). Facebook wouldn't want to serve all of its javascript every time you load the homepage, so it serves only whats needed on the homepage. Then, when you go to your profile, it loads some more javascript for that page with ajax. This option tells it where on your server to load that bundle from

不，这个选项在开发服务器中很有用，但它的目的是在生产中异步加载脚本包。假设您有一个非常大的单页应用程序（例如 Facebook）。Facebook 不希望每次加载主页时都提供其所有 javascript，因此它只提供主页上需要的内容。然后，当您转到您的个人资料时，它会使用 ajax 为该页面加载更多 javascript。此选项告诉它从服务器上的何处加载该包

回答by Isaac Pak

You can use publicPath to point to the location where you want webpack-dev-server to serve its "virtual" files. The publicPath option will be the same location of the content-build option for webpack-dev-server. webpack-dev-servercreates virtual files that it will use when you start it. These virtual files resemble the actual bundled files webpack creates. Basically you will want the --content-base option to point to the directory your index.html is in. Here is an example setup:

您可以使用 publicPath 指向您希望 webpack-dev-server 为其“虚拟”文件提供服务的位置。publicPath 选项将是 webpack-dev-server 的 content-build 选项的相同位置。 webpack-dev-server创建虚拟文件，当你启动它时它将使用。这些虚拟文件类似于 webpack 创建的实际捆绑文件。基本上你会希望 --content-base 选项指向你的 index.html 所在的目录。 这是一个示例设置：

//application directory structure
/app/
/build/
/build/index.html
/webpack.config.js


//webpack.config.js
var path = require("path");
module.exports = {
...
  output: {
    path: path.resolve(__dirname, "build"),
    publicPath: "/assets/",
    filename: "bundle.js"
  }
};  


//index.html
<!DOCTYPE>
<html>
...
<script src="assets/bundle.js"></script>
</html>

//starting a webpack-dev-server from the command line
$ webpack-dev-server --content-base build 

webpack-dev-server has created a virtual assets folder along with a virtual bundle.js file that it refers to. You can test this by going to localhost:8080/assets/bundle.js then check in your application for these files. They are only generated when you run the webpack-dev-server.

webpack-dev-server 已经创建了一个虚拟资产文件夹以及它引用的虚拟 bundle.js 文件。您可以通过转到 localhost:8080/assets/bundle.js 来测试它，然后在您的应用程序中检查这些文件。它们仅在您运行 webpack-dev-server 时生成。

回答by Kent Wood

in my case, i have a cdn,and i am going to place all my processed static files (js,imgs,fonts...) into my cdn,suppose the url is http://my.cdn.com/

就我而言，我有一个 CDN，我要将所有处理过的静态文件（js、imgs、字体...）放入我的 CDN，假设 url 是http://my.cdn.com/

so if there is a js file which is the orginal refer url in html is './js/my.js' it should became http://my.cdn.com/js/my.jsin production environment

所以如果有一个js文件是html中的原始引用url是'./js/my.js'它应该在生产环境中变成http://my.cdn.com/js/my.js

in that case,what i need to do is just set publicpath equals http://my.cdn.com/and webpack will automatic add that prefix

在这种情况下，我需要做的只是设置 publicpath 等于http://my.cdn.com/并且 webpack 将自动添加该前缀

回答by udeep shrestha

filenamespecifies the name of fileinto which all your bundled code is going to get accumulated after going through build step.

filename指定文件的名称，您的所有捆绑代码在完成构建步骤后将累积到该文件中。

pathspecifies the output directorywhere the app.js(filename) is going to get saved in the disk. If there is no output directory, webpack is going to create that directory for you. for example:

路径指定输出目录，其中app.js（文件名）是会得到保存在磁盘上。如果没有输出目录，webpack 会为你创建那个目录。例如：

module.exports = {
  output: {
    path: path.resolve("./examples/dist"),
    filename: "app.js"
  } 
}

This will create a directory myproject/examples/distand under that directory it creates app.js, /myproject/examples/dist/app.js. After building, you can browse to myproject/examples/dist/app.jsto see the bundled code

这将创建一个目录myproject/examples/dist并在该目录下创建app.js，/myproject/examples/dist/app.js。构建完成后，您可以浏览到myproject/examples/dist/app.js来查看捆绑的代码

publicPath: "What should I put here?"

publicPath：“我应该在这里放什么？”

publicPathspecifies the virtual directory in web serverfrom where bundled file, app.js is going to get served up from. Keep in mind, the word server when using publicPath can be either webpack-dev-server or express server or other server that you can use with webpack.

publicPath指定web 服务器中的虚拟目录，从那里捆绑文件 app.js 将被提供。请记住，使用 publicPath 时的服务器一词可以是 webpack-dev-server 或 express server 或其他可以与 webpack 一起使用的服务器。

for example

例如

module.exports = {
  output: {
    path: path.resolve("./examples/dist"),
    filename: "app.js",
    publicPath: path.resolve("/public/assets/js")   
  } 
}

this configuration tells webpack to bundle all your js files into examples/dist/app.jsand write into that file.

此配置告诉 webpack 将所有 js 文件捆绑到examples/dist/app.js并写入该文件。

publicPathtells webpack-dev-server or express server to serve this bundled file ie examples/dist/app.jsfrom specified virtual location in serverie /public/assets/js. So in your html file, you have to reference this file as

publicPath告诉 webpack-dev-server 或 express 服务器从服务器中指定的虚拟位置（即 /public/assets/js）提供这个捆绑文件，即examples/dist/app.js。因此，在您的 html 文件中，您必须将此文件引用为

<script src="public/assets/js/app.js"></script>

So in summary, publicPath is like mapping between virtual directoryin your server and output directoryspecified by output.path configuration, Whenever request for file public/assets/js/app.jscomes, /examples/dist/app.jsfile will be served

因此，在总结，publicPath像之间的映射virtual directory在你的服务器，并output directory通过output.path配置，只要对文件请求指定的公共/资产/ JS / app.js来，/examples/dist/app.js文件将被送达

回答by Alan

The webpack2 documentation explains this in a much cleaner way: https://webpack.js.org/guides/public-path/#use-cases

webpack2 文档以更简洁的方式解释了这一点：https://webpack.js.org/guides/public-path/#use-cases

webpack has a highly useful configuration that let you specify the base path for all the assets on your application. It's called publicPath.

webpack 有一个非常有用的配置，可以让您为应用程序中的所有资产指定基本路径。它被称为公共路径。

回答by Khalid Azam

publicPath is used by webpack for the replacing relative path defined in your css for refering image and font file.

webpack 使用 publicPath 来替换在 css 中定义的用于引用图像和字体文件的相对路径。