搜索
您的当前位置:首页正文

Webpack path与publicPath的区别详解

2023-12-08 来源:车融汽车网

前言

在webpack模块化开发的过程中,发现webpack.config.js配置文件的输出路径总有一个path与publicPath,不解其意。

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

正文

官方解释

publicPath: The output.path from the view of the Javascript / HTML page.

从JS/HTML页面来看的输出路径

我的理解

output.path 储存你所有输出文件的本地文件目录。(绝对路径)

举个例子:

path.join(__dirname, “build/”) 

webpack将会把所有的文件输出到localdisk/path-to-your-project/build/

output.publicPath

你上传所有打包文件的位置(相对于服务器根目录)

path:用来存放打包后文件的输出目录

publicPath:指定资源文件引用的目录

用处:例如在express中,指定了public/dist是网站的根目录,网站的源文件存放在public中,那么就需要设置path:”./dist”指定打包输出到该目录,而publicPath就需要设置为”/”,表示当前路径。

publicPath取决于你的网站根目录的位置,因为打包的文件都在网站根目录了,这些文件的引用都是基于该目录的。假设网站根目录为public,引用的图片路径是'./img.png',如果publicPath为'/',图片显示不了,因为图片都打包放在了dist中,那么你就要把publicPath设置为”/dist”。

举个例子:

/assets/

假设你将这个工程部署在服务器 http://server/

通过将output.publicPath设置为/assets/,这个工程将会在http://server/assets/找到webpack资源。

在这种前提下,所有与webpack相关的路径都会被重写成以/assets/开头。

src="picture.jpg" Re-writes ➡ src="https://www.gxlcms.com/assets/picture.jpg"Accessed by: (http://server/assets/picture.jpg)src="https://www.gxlcms.com/img/picture.jpg" Re-writes ➡ src="https://www.gxlcms.com/assets/img/picture.jpg"Accessed by: (http://server/assets/img/picture.jpg)

重要

如果你在用style-loader或者css sourceMap,你就需要设置publicPath。把它设置成服务器地址的绝对路径,比如http://server/assets/,这样资源可以被正确加载。

小编还为您整理了以下内容,可能对您也有帮助:

Webpack 的output中 path与publicPath的区别详解

假设你将这个工程部署在服务器 http://server/

通过将output.publicPath设置为/assets/,这个工程将会在 http://server/assets/ 找到webpack资源。

在这种前提下,所有与webpack相关的路径都会被重写成以/assets/开头。

此路径下的打包文件可在浏览器中访问。

假设服务器运行在 http://localhost:8080 并且 output.filename 被设置为 bundle.js。默认 devServer.publicPath 是 '/',所以你的包(bundle)可以通过 http://localhost:8080/bundle.js 访问。

修改 devServer.publicPath,将 bundle 放在指定目录下:

如果你在用style-loader或者css sourceMap,你就需要设置publicPath。把它设置成服务器地址的绝对路径,比如 http://server/assets/ ,这样资源可以被正确加载。

webpack配置中的contentBase和publicPath

我们最常接触的output的配置是:

那么这里publicPath是用来干嘛的?

其实publicPath被webpack的插件(url-loader,html-webpack-plugin)用于在proction环境下更新引用的静态资源的url。

那么当你执行打包过后你的静态资源路径就会被加上publicPath的路径

dev-server

其实就是index.html所在的目录

当启动devServer的时候,文件也会被编译,上面说到它只存在于内存中。

publicPath其实就是指定外部访问编译文件的路径

devServer配置

index页面

那么当我们的devServer启动的时候做了哪些事儿:

1.首先加载contentPath下面的index.html(由于没有设置),则访问的便是

2.加载index.html里的静态资源,由于设置了publicPath,那么编译后的文件提供给外部的访问路径就是contentPath + publicPath,也就是

3.由于在内存中找到了该文件则不去读取硬盘中的文件

Webpack打包图片路径问题

配置

其中

outputPath 负责输出目录, 即打包后的写在磁盘的位置.

publicPath 则是对页面引入资源的补充,比如 img 标签引入或者 css 引入等.

按上面路径配置时, 打包后文件都在 build/img

开发环境 下可以正确引入文件,引入路径为 localhost:8080/img

生产环境 下引入路径为 f:///img 导致找不到图片

output : 指定将放置目标文件的文件系统路径. 这跟我们遇到的文件没多大关系.那问题就是在 publicPath

publicPath : 指定目标文件的 自定义公共 路径,它是定义公共路径,所以我们在开发模式下能正确引入文件,因为都在同一个路径下,即 localhost:8080 .

别忘了我们引进图片有两种方式, img 标签或者 css 引入.

当我将 file-loader 路径配置修改为

因为打包后目录结构是

结果通过 css 引入的图片打包后还可以正确引入,路径是 ../img
但是通过 img 标签引入的图片则报错,引入路径是 项目根目录/img ,正确的应该是 项目根目录/build/img

我们看看打包后的 js 中的引入路径

看起来好像是正确的,但是有一点, CSS 和 JS 引入图片的机制是不一样,详细可以看 css和js引用图片的路径问题

我们已经找到问题所在了, 那么该如何解决呢?

不设置 file-loader 的 outputPath 和 publicPath ,默认跟随 webpack 的打包目录, 这还不够,我们还得将 css 文件也打包到跟图片文件同级.

打包后目录为

这样不管是 生产环境 还是 开发环境下 都能正确引入图片.

但是当图片多了之后 build 目录下会有很多的文件,我们还是希望图片文件打包后在 img 文件夹.让我们再来看看这该怎么解决.

我们已经知道了设置了 file-loader 下的 publicPath 就是 css 文件与 js 文件引入图片的路径,因为 css 和 js 引入的机制不同,我们只需要将 css 文件打包之后与 html 同级即可.

修改 webpack 配置

修改前

修改后

打包后目录结构

完美解决.

修改 extract-text-webpack-plugin 的options以及 file-loader 的 publicPath

打包后的目录

根据两个文件夹的位置关系, 我们设置 extract-text-webpack-plugin

移除 file-loader 的干扰

Webpack打包图片路径问题

配置

其中

outputPath 负责输出目录, 即打包后的写在磁盘的位置.

publicPath 则是对页面引入资源的补充,比如 img 标签引入或者 css 引入等.

按上面路径配置时, 打包后文件都在 build/img

开发环境 下可以正确引入文件,引入路径为 localhost:8080/img

生产环境 下引入路径为 f:///img 导致找不到图片

output : 指定将放置目标文件的文件系统路径. 这跟我们遇到的文件没多大关系.那问题就是在 publicPath

publicPath : 指定目标文件的 自定义公共 路径,它是定义公共路径,所以我们在开发模式下能正确引入文件,因为都在同一个路径下,即 localhost:8080 .

别忘了我们引进图片有两种方式, img 标签或者 css 引入.

当我将 file-loader 路径配置修改为

因为打包后目录结构是

结果通过 css 引入的图片打包后还可以正确引入,路径是 ../img
但是通过 img 标签引入的图片则报错,引入路径是 项目根目录/img ,正确的应该是 项目根目录/build/img

我们看看打包后的 js 中的引入路径

看起来好像是正确的,但是有一点, CSS 和 JS 引入图片的机制是不一样,详细可以看 css和js引用图片的路径问题

我们已经找到问题所在了, 那么该如何解决呢?

不设置 file-loader 的 outputPath 和 publicPath ,默认跟随 webpack 的打包目录, 这还不够,我们还得将 css 文件也打包到跟图片文件同级.

打包后目录为

这样不管是 生产环境 还是 开发环境下 都能正确引入图片.

但是当图片多了之后 build 目录下会有很多的文件,我们还是希望图片文件打包后在 img 文件夹.让我们再来看看这该怎么解决.

我们已经知道了设置了 file-loader 下的 publicPath 就是 css 文件与 js 文件引入图片的路径,因为 css 和 js 引入的机制不同,我们只需要将 css 文件打包之后与 html 同级即可.

修改 webpack 配置

修改前

修改后

打包后目录结构

完美解决.

修改 extract-text-webpack-plugin 的options以及 file-loader 的 publicPath

打包后的目录

根据两个文件夹的位置关系, 我们设置 extract-text-webpack-plugin

移除 file-loader 的干扰

Webpack 配置

通过 http://[devServer.host]:[devServer.port]/webpack-dev-server 查看 devServer 提供的所有资源列表。

通过 http://[devServer.host]:[devServer.port]/[output.publicPath]/资源名称 来访问对应的资源。

如果提供了 devMiddleware.publicPath ,则通过 http://[devServer.host]:[devServer.port]/[devMiddleware.publicPath]/资源名称 来访问对应的资源,但是通过插件生成的 html 和 css 文件当中所有资源引用的路径仍然使用的是 http://[devServer.host]:[devServer.port]/[output.publicPath]/资源名称 。因此需要保证 output.publicPath 与 devMiddleware.publicPath 一致。

static 设置的是静态资源目录的位置,不是打包生成的文件的存放位置,devServer 打包生成的文件存放在内存中,不存放到硬盘目录。

static.publicPath 设置的是访问静态资源的路径,不是访问打包生成的资源的路径,打包生成的资源路径通过 output.publicPath 访问,静态资源路径访问的是直接存放在静态目录中的静态资源。

配置文件

initial chunk 的文件名

占位符:

non-initial chunk 的文件名,占位符参考 output.filename

设置为 true ,每次打包之前清理 output.path 目录中的所有内容,可以替代 CleanWebpackPlugin 插件。

定义资源存放的位置,例如根据以上的配置文件打包之后生成如下文件:

将 1 2 3 生成的资源都存放到 output.path 目录, dist/app.bundle.js dist/css/app.min.css dist/images/1.jpg

部署的时候,将该目录下的内容复制到服务器对应的目录即可。

定义资源访问的路径

资源访问路径 = output.publicPath + 资源名称

output.publicPath 可以是绝对路径、相对于服务的路径、相对于页面的路径。 不管是哪种路径,都要以 / 结尾

HtmlWebpackPlugin 生成的 index.html 文件:

MiniCssExtractPlugin 生成的 css 文件:

HtmlWebpackPlugin 生成的 index.html 文件:

MiniCssExtractPlugin 生成的 css 文件:

HtmlWebpackPlugin 生成的 index.html 文件:

MiniCssExtractPlugin 生成的 css 文件:

不管通过哪种路径设置 output.publicPath ,都只是影响 HtmlWebpackPlugin 和 MiniCssExtractPlugin 生成的文件中引用其他资源的路径。具体能不能根据资源路径访问到相应的资源,还得正确的部署 output.path 目录到服务器。

在开发模式下,devServer 自动开启一个开发服务器,并且将所有打包生成的资源存储到内存当中,然后通过 http://[devServer.host]:[devServer.port]/[output.publicPath]/资源名称 来访问对应的资源。 这时候 output.publicPath 应该设置为相对服务的路径,例如 / 。

如果你的页面希望在其他不同路径中找到资源文件,则可以通过 devServer 配置中的 devMiddleware.publicPath 选项进行修改。

在生产模式下,推荐将 output.publicPath 设置为绝对路径,然后将 output.path 目录部署与绝对路径对应的服务器中。

配置文件

mole.rules 是匹配规则数组,数组中的每一项为一条匹配规则,以下称为 rule。每条 rule 包括匹配条件和匹配结果。

对于依赖图中的每个模块路径,都按照 mole.rules 中的 rule 依次进行匹配。如果模块路径满足某个 rule 的匹配条件,则对该模块应用该 rule 的 匹配结果中指定的 loader 进行预处理。? 如果模块路径满足多个 rule 的匹配条件 ?

匹配条件包括 test include exclude 选项,每个选项为一个匹配条件,选项的值可以是:

如果某个 rule 同时有多个匹配条件选项,则模块路径必须同时满足所有的匹配条件,才会对模块应用匹配结果。test 和 include 具有相同的作用,都是必须匹配选项。exclude 是必不匹配选项(优先于 test 和 include)。

最佳实践:

以上配置文件的第二条 rule,如果某个模块不在 ./src/node_moles/ 和 ./src/libs/ 目录下,并且在 ./src/ 目录下,并且模块名以 .js 结尾,则满足该条 rule 的匹配条件。

package.json

webpack.common.js

webpack.prod.js

webpack.dev.js

Webpack-publicPath

实验是检验用法的最好途径,于是设置目录结构如下:

src

|---index.html

|---index.js

|---asssets

    |----1.jpg

目的是将脚本打包到一个统一的dist文件夹下。

使用webpack-dev-server重新打包并打开index.html时,报错如下:

为什么找不到呢?

这时你需要在devServer中添加publicPath属性:

重新使用webpack-dev-server打包,并打开index.html你会发现,找到了bundle.js。但是仍旧提示找不到图片

所以,此时devServer.pulicPath属性的含义可以这么理解:

可为什么找不到图片呢?先回味一下官方原文

也就是说:如果你require了一些资源或直接引用了网络上的资源,这些资源里包含uri属性(如css中设置img:url('./1.jpg')),就要使用就这个属性,否则会找不到文件。(如果没有使用uri资源,那么这个属性没什么用)。

说人话---这个属性就是让webpack在打包时才能根据配置动态修改uri中的相对值的;你不配置,webpack打包后的bundle.js中引用的url不对。

于是再去配置output下的publicPath,将其修改为

重新执行webpack-dev-server,打开index.html发现一切正常!

后来尝试,不配置webserver.publicPath,而只配置output中的publicPath且修改为:

重新执行webpack-dev-server,打开index.html发现一切正常!

难道我对webserver.publicPath的理解有错?

比较了加与不加时,控制台打印出的日志才明白:

车融汽车网还为您提供以下相关内容希望对您有帮助:

Webpack 的output中 path与publicPath的区别详解

通过将output.publicPath设置为/assets/,这个工程将会在 http://server/assets/ 找到webpack资源。在这种前提下,所有与webpack相关的路径都会被重写成以/assets/开头。此路径下的打包文件可在浏览器中访问。假设服务器运行在...

webpack配置中的contentBase和publicPath

其实publicPath被webpack的插件(url-loader,html-webpack-plugin)用于在production环境下更新引用的静态资源的url。那么当你执行打包过后你的静态资源路径就会被加上publicPath的路径 dev-server 其实就是index.html所在的目录 ...

Webpack打包图片路径问题

outputPath 负责输出目录, 即打包后的写在磁盘的位置.publicPath 则是对页面引入资源的补充,比如 img 标签引入或者 css 引入等.按上面路径配置时, 打包后文件都在 build/img 开发环境 下可以正确引入文件,引入路径为 local...

webpack和webpack-dev-server的区别

那么区别就在于 output了 path和webpack一起,指明构建 之后 输出文件的位置,这是真实的物理地址 publickPath和webpack-dev-server一起,当执行webpack-dev-server时,第一步首先跟webpack一样,先构建输出,然后提供web访...

Webpack 配置

资源访问路径 = output.publicPath + 资源名称 output.publicPath 可以是绝对路径、相对于服务的路径、相对于页面的路径。 不管是哪种路径,都要以 / 结尾 HtmlWebpackPlugin 生成的 index.html 文件:MiniCssExtract...

{PUBLIC_PATH}>是哪方面语句?是php?还是webpack ?

举个使用场景 在迁移旧 require 项目的时候,直接更改了 require.config 文件在测试的时候指向本地目录,然后愉快的使用 publicPath 了。

Webpack-publicPath

于是再去配置output下的publicPath,将其修改为 重新执行webpack-dev-server,打开index.html发现一切正常!后来尝试,不配置webserver.publicPath,而只配置output中的publicPath且修改为:重新执行webpack-dev-server,打开index....

webpack中是什么意思?有什么用?如何用

// webpack.config.js module.exports = { entry: './main.js',output: { path: './build', // 图片和 JS 会到这里来 publicPath: 'http://mycdn.com/', // 这个用来成成比如图片的 URL filename: '...

webpack对样式的处理 导入样式require和import的区别

可以发现,webpack的loader的配置是从右往左的,从上面代码看的话,就是先使用css-loader之后使用style-loader。同理,如果你使用less来写样式的话,则需要先用less-loader来编译样式文件为css文件,再继续使用css-loader与style-loader。{ ...

出口(Output)

注意: 在编译时不知道最终输出文件的 publicPath 的情况下, publicPath 可以留空,并且在入口点文件运行时动态设置。如果你在编译时不知道 publicPath ,你可以先忽略它,并且在入口点设置 __webpack_public_path__ 。Ja...

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

热门图文

Top