Javascript 什么是；“公共路径”；在网页包里做什么？_Javascript_Webpack

Javascript 什么是；“公共路径”；在网页包里做什么？

javascript webpack

Javascript 什么是；“公共路径”；在网页包里做什么？,javascript,webpack,Javascript,Webpack,说明output.publicPath为： JavaScript视图中的output.path 你能详细说明一下这到底意味着什么吗我使用output.path和output.filename指定Webpack应在何处输出结果，但我不确定在output.publicPath中放置什么以及是否需要它 module.exports = { output: { path: path.resolve("./examples/dist"), filename: "app.js",

说明

output.publicPath

为：

JavaScript视图中的

output.path

你能详细说明一下这到底意味着什么吗

我使用

output.path

和

output.filename

指定Webpack应在何处输出结果，但我不确定在

output.publicPath

中放置什么以及是否需要它

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

在浏览器中执行时，webpack需要知道生成的捆绑包的宿主位置。因此，它能够请求额外的块（使用时）或分别通过或加载的引用文件

例如：如果您将http服务器配置为在

/assets/

下托管生成的捆绑包，您应该写：

publicPath:“/assets/”

publicPath只是用于开发目的，我在第一次看到这个config属性时感到困惑，但现在我已经使用webpack一段时间了，这很有意义

假设您将所有js源文件放在

src

文件夹下，并配置您的网页，以使用

output.path

将源文件构建到

dist

文件夹中

但是您希望在更有意义的位置下提供静态资产，如

webroot/public/assets

，这一次您可以使用

out.publicPath='/webroot/public/assets'

，以便在html中，您可以使用

引用js

当您请求

webroot/public/assets/bundle.js

时，

webpack dev server

将在dist文件夹下找到js

更新：

谢谢查理·马丁纠正我的回答

publicPath只是用于开发目的，而不仅仅是用于开发目的

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

就我而言，我有一个cdn，我将把所有处理过的静态文件（js、IMG、字体…）放入我的cdn，假设url是

因此，如果有一个js文件，它是html中的原始引用url，则为“./js/my.js” 它应该在生产环境中使用

在这种情况下，我需要做的就是将publicpath设置为等于并且webpack将自动添加该前缀

output.path

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

示例：

path.join（\uu dirname，“build/”）

Webpack将所有内容输出到

localdisk/项目路径/build/

output.publicPath

你上传捆绑文件的地方（绝对路径，或相对于主HTML文件）

示例：

/assets/

假设您在服务器根目录下部署了应用程序

http://server/

通过使用

/assets/

，应用程序将在以下位置找到网页资产：

http://server/assets/

。在引擎盖下，webpack遇到的每个URL都将被重新写入，以“

/assets/

”开头

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

）

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

您可以使用publicPath指向希望webpack dev server为其“虚拟”文件提供服务的位置。publicPath选项将与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

//应用程序目录结构
/应用程序/
/建造/
/build/index.html
/webpack.config.js
//webpack.config.js
var路径=要求（“路径”）；
module.exports={
...
输出：{
path:path.resolve（_dirname，“build”），
publicPath:“/assets/”，
文件名：“bundle.js”
}
};  
//index.html
...
//从命令行启动webpack dev服务器
$webpack开发服务器--内容库生成

webpack dev server已创建一个虚拟资产文件夹及其引用的virtual bundle.js文件。您可以通过转到localhost:8080/assets/bundle.js来测试这一点，然后在应用程序中签入这些文件。它们仅在运行webpack开发服务器时生成。

webpack2文档以更简洁的方式解释了这一点：

webpack具有非常有用的配置，允许您为应用程序上的所有资产指定基本路径。它叫公共路径

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

路径指定将app.js（文件名）保存在磁盘中的输出目录。如果没有输出目录，webpack将为您创建该目录。例如：

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

这将创建一个目录myproject/examples/dist，并在该目录下创建app.js，/myproject/examples/dist/app.js。构建后，您可以浏览到myproject/examples/dist/app.js查看

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

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

dist/blog/index.html
dist/app.js
dist/app.css
dist/index.html