webpack 踩坑之 path publicPath

最新推荐文章于 2025-02-19 10:48:47 发布
原创 最新推荐文章于 2025-02-19 10:48:47 发布 · 1.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文解析了VueCli项目中Webpack配置的path和publicPath作用。path定义了输出文件的绝对目标路径，而publicPath则设定了HTML页面引用资源的基础路径前缀。深入理解这两个概念有助于更高效地进行前端资源管理。

咋们以 Vue Cli 为例，介绍一下 webpack 配置的中的 path 和 publicPath：

path： 所有输出文件的目标路径，必须是绝对路径（使用 node.js 的 path 模块）

如上图，项目打包后，输出文件在 dist 目录下

 

publicPath： 引用文件的路径前缀，url 相对于 HTML 页面

如上图，指定了资源的基础路径 "/" 和子路径 "static"

publicPath 只是为项目中引入的资源指定一个基础路径

 

占坑：https://www.cnblogs.com/bydzhangxiaowei/p/8972662.html

https://webpack.docschina.org/guides/public-path/

最完整的webpack Dll打包与采坑总结
仰望星空的代码
05-21 1181
webpack已经成为前端主流的项目打包工具，对于前端开发必不可少。在前端项目依赖第三方库过多，项目比较大文件比较多时，webpack打包的速度也会被拖成蜗牛，是时候优化一下webapck的打包速度了。在优化打包速度方面有不少方法方式，其中一个比较重要的方式是DllPlugin。DllPlugin把第三方库打包成动态链接库（动态链接库：windows系统中库文件概念，这里是借用了这一概念。），DllPlugin将不频繁更新的库进行编译，当这些依赖的库的版本没有变化时，就不需要重新编译。如果更新了依赖的第三.
vue中使用bootstrap4踩坑之旅
糖长老莫小贝的博客
07-20 4680
bootstrapvue官网 bootstrap4中文官网 以下文章记录本人的踩坑过程，最后已亲测有效，但不保证是最简便的方法，最好的建议是去bootstrapvue官网看文档直接尝试。 一、引入jquery 1.安装jQuery npm install jquery --save 或 yarn add jquery --save 2.在webpack.base.config.js 添加内...
Webpack path与publicPath的区别详解
12-10
前言 在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/H
Webpack中publicPath路径问题详解
12-10
最近自己在搭建一个基于webpack的react项目，遇到关于output.publicPath和webpack-dev-server中publicPath的问题，而官方文档对它们的描述也不是很清楚，所以自己研究了下并写下本文记录。 output output选项指定webpack输出的位置，其中比较重要的也是经常用到的有 path 和 publicPath output.path 默认值： process.cwd() output.path 只是指示输出的目录，对应一个 绝对路径 ，例如在项目中通常会做如下配置： output: { path: path.resolve(__dirna
【无标题】Webpack中publicPath详解
qq_30436011的博客
10-25 5188
关于webpack中的path。
webpack path publicpath 的区别
doctorone的博客
04-04 493
一般情况的打包目录： path: index.html xx/app.js xx/main.css xx/logo.png path：是打包文件 本地输出目录 publicpath：在服务器上的发布目录（建议绝对路径，相对路径也可以，但是注意的是相对index.html服务器发布目录）app.js 会渲染进入 index.html ...
webpack踩坑之路图片的路径与打包
08-29
在使用 Webpack 打包图片时，我们还需要注意 output.publicPath 属性的配置。output.publicPath 属性表示资源的发布地址，当配置过该属性后，打包文件中所有通过相对路径引用的资源都会被配置的路径所替换。 output...
webpack中分割代码的三种方式
凝视深渊
10-10 2689
文章目录entry - 配置多入口、多页面splitChunks - 智能抽取公共代码dynamic-import - 按需动态加载tips - 踩坑小提示避免过度优化！结局 官网教程：code-splitting 最近在开发一个新的功能，需要在某一条件下引入新包，而之前的场景则完全不需要。这种情况下，动态加载+代码分割正可以派上用场。在动手之前，先看看官网是怎么说的吧。 entry - 配置多入...
利用 stats.json 定位 @nrwl/react webpack 配置问题
Hitxzi的博客
12-06 756
背景 团队使用NX这一 monorepo 工具来搭建 React 应用。NX 基于 React 应用在 webpack 打包时添加了url-loader的相关配置。但是同事反馈该url-loader针对部分引用的图片文件不起作用。 定位 url-loader 作用 url-loader，简而言之，可以将应用中引用到的一些资源文件（例如图片）转换成 base64 的数据格式，然后嵌入到我们的应用中（例如 HTML 的 img src, css 中的 url 函数），这样便无需针对该资源发起网络请求，节省请求资
webpack中output之path和publicPath详解
祥哥的说
06-09 2万+
path:所有输出文件的目标路径;打包后文件在硬盘中的存储位置。publicPath:输出解析文件的目录，指定资源文件引用的目录 ，打包后浏览器访问服务时的 url 路径中通用的一部分。区别：path是webpack所有文件的输出的路径，必须是绝对路径，比如：output输出的js,url-loader解析的图片，HtmlWebpackPlugin生成的html文件，都会存放在以path为基础的目...
webpack的path、publicPath和 devServer 的publicPath、contentBase
Dailoge的博客
10-26 2759
webpack path 文档描述 默认值：process.cwd() output.path目录对应一个绝对路径， 最后 path 会输出到物理硬盘上的。 const path = require('path'); module.exports = { //... output: { path: path.resolve(__dirname, 'dist/assets') } }; publicPath 文档描述 默认值：空字符串 此选项指定在浏览.
webpack中output中path和publicPath区别详解
反手一个bug的博客
04-26 1779
文章目录前言正文path和publicPath的定义path和publicPath的区别利用publicPath区分不同环境资源路径小结 前言         webpack是目前比较主流的前端打包工具，其中output属性中有两个类似的配置项，path和publicPath，这一章我们来看看他们之间的区别 正文 path和publicPath的定义 path:所有输出文件的目标路径;打包后文件在硬盘中的存储位置。 publi
webpack中的path、publicPath、contentBase的区分
青天诀的专栏
10-23 6783
output.publicPath & devServer.publicPath output里面的publicPath表示的是打包生成的index.html文件里面引用资源的前缀； devServer里面的publicPath表示的是打包生成的静态文件所在的位置（若是devServer里面的publicPath没有设置，则会认为是output里面设置的publicPath的值）； 两...
Vue.config文件里边的publicPath的配置使用
2201_75705263的博客
03-05 9628
如果你的项目里面的静态文件都放在public文件中，那么使用的时候要使用publicPath这个变量，防止打包后静态文件找不到；你需要通过绝对路径来引用它们。因为：任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack；相当于打包过后的路径上多一个文件夹的名字。
【掌握webpack】一张图让你明白webpack中output的filename、path、publicPath与主流插件的关系
w4ngzhen的博客
02-19 1911
webpack的核心概念，放到2022年相信很多的小伙伴都已经非常清楚了。但是，对于webpack配置中的output.path、output.filename以及output.publicPath，还有很多小伙伴还不理解。本文讲围绕output.filename、output.path与output.publicPath，讲解它们的功能，并分析这些配置与webpack中常使用到的MiniCssExtractPlugin、HtmlWebpackPlugin等插件的关系。more直接上总结图。
关于Vue项目中打包时，资料路径需要切换至相对路径的问题
engineer_why的博客
10-15 3521
在网站的访问中，如果静态资源使用了绝对路径，那么它始终以当前网站作为访问的根节点。就是绝对错不了的路径，始终以一个固定的目录作为起点。容易错，可以是任意一个目录节点作为起点。
关于webpack的path和publicPath。
weixin_30404405的博客
05-27 304
path:所有输出文件的目标路径; publicPath:输出解析文件的目录，url 相对于 HTML 页面 区别：path是webpack所有文件的输出的路径，必须是绝对路径，比如：output输出的js,url-loader解析的图片，HtmlWebpackPlugin生成的html文件，都会存放在以path为基础的目录下 module.exports={ entry:...
vue-cli如何正确设置publicPath保证打包部署后静态资源路径正确的问题
热门推荐
一键写代码的博客
07-23 2万+
几种设置publicPath后，再对比打包后的index.html文件 测试背景： 每次打包build完后，都单独生成一个/dist文件夹，且dist中每次都只有相同文件目录 部署的时候，前端打包的文件部署在服务器的一个静态资源目录下 我们是放在这个目录下的根目录还是在这个目录下的一个文件夹内，都需要前端正确设置publicPath才能正确访问的。 打包后的文件目录： ├─dist ├─css ├─img └─js index.html 一、不设置publicPath时，既设置为''，部署后请求
webpack publicpath不同环境的作用
最新发布
07-11
在 Webpack 中，`publicPath` 是一个用于指定资源文件（如 JavaScript、CSS、图片等）加载路径的重要配置项。它决定了构建后的静态资源在浏览器中如何被访问，并且可以根据不同的运行环境进行灵活调整。 ### `...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值