webpack的publicpath

目录

outPut中的publicPath

webpack-dev-server中的publicPath

斜杠/的含义

常见问题:


当你的项目是放在服务器根目录的时候,publicpath=“/”
当你的项目是放在服务器根目录的某个文件的时候,publicpath=“/xxx”
如下图

outPut中的publicPath

默认值: 空字符串。

  publicPath是非常有必要配置的,他是项目中引入静态资源(js、css)时的基础路径。

例如:outPut.publicPath = '/dist/';

在使用html - webpack - plugin插件打包后的html文件(下图)可以看到,引入js文件的路径为“publicPath + 静态资源“。敲黑板划重点,这里publicPath应该写“以根目录的方式表示的路径,如:/dist/”或者是绝对路径,不应该是相对路径。因为将静态资源放在CDN上时,使用相对路径是无法访问到资源的。如果不设置pablicPath行不行,答案是不行。不设置的话默认取值为空字符串(pablicPath: ' '),那么使用html - webpack - plugin打包后的html中引入的js路径为 src = "../folder1.a095318635a306de0d2e.js",对,成了相对路径了。所以如果在生产环境上,publicPath设置成绝对路径最好。

 

webpack-dev-server中的publicPath

默认值:‘/’。注意,如果你output和devServer中都没有配置publicPath,那么devServer的publicPath默认值为‘/’;但是如果output中配了publicPath,devServer中没配,那么devServer中publicPath的默认值以output中的为准。

  在开发阶段,我们要用devServer启动一个开发服务器,这里也有一个publicPath需要配置。webpack-dev-server打包的文件是放在内存中的而不是本地上,这些打包后的资源对外的根目录就是publicPath。

例如:

devServer: {...publicPath: '/dist/'    
}

那么我们可以在浏览器中输入,http://localhost:9000/dist/  +  资源名,就可以访问到该资源(下图)。注意:devServer中的publicPath需要跟outPut中的一致,或则不设置publicPath,他会默认与output中的一致

斜杠/的含义

配置中/代表url根路径,例如http://localhost:8080/dist/js/test.js中的http://localhost:8080/

 

常见问题:

 浏览器打开http://localhost:9000/index.html时页面空白。这是因为output与devServer中的publicPath不一致,导致资源没有引入进页面里。

例子:

假如你的配置如下就会出现页面空白的问题

output: {...publicPath: '/dist/'        
}devServer: {...publicPath: '/assets/'    
}

html-webpack-plugin插件在打包html(下图)时,里面引入js文件的路径会是src="/dist/资源名" 。但是http://localhost:9000/dist/folder1.0bad1ca562f90da47034.js是引入不到该资源的,而http://localhost:9000/assets/folder1.0bad1ca562f90da47034.js可以引入到该资源。体会下这句话,"开发环境时,用webpack-dev-server打包的资源是存放在devServer.publicPath路径下",你就会明白了。所以output和devServer中的publicPath需要一致。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/427975.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

windows网络共享网络(Internet连接共享)(ICS:Internet Connection Sharing)可以让某台主机共享笔记本网络(或笔记本手机热点)实现上网(设备网线直连笔记本)

文章目录 Windows网络共享实现笔记本共享上网详解网络共享基础分类有线共享无线共享 介质 配置网络共享前的准备工作检查硬件需求更新驱动程序检查操作系统 配置Internet连接共享启用ICS功能1. 打开“控制面板”。3. 点击网络和 Internet“网络和共享中心” --> 查看网络状态…

静态分析C语言生成函数调用关系的利器——cally和egypt

大纲 准备工作安装graphviz安装cally安装egypt简单分析GCC产生RTL(Register transfer language)文件callyegypt总结 高级分析callyegypt 总结参考资料 在《静态分析C语言生成函数调用关系的利器——cflow》和《静态分析C语言生成函数调用关系的利器——c…

Django笔记(六):DRF框架

首 前后端分离是互联网应用开发的标准使用方式,让前后端通过接口实现解耦,能够更好的进行开发和维护。 RESTful接口常见规范 在接口设计中,大家遵循一定的规范可以减少很多不必要的麻烦,例如url应有一定辨识度,可以…

电信宽带配置动态域名和端口映射

需求: 家宽映射动态域名访问内网服务 动态域名:18081>电信光猫:18081>Openwrt软路由:18081>主机192.168.3.172:8081 目前网络结构: 电信光猫192.168.1.1 Openwrt软路由192.168.3.1 主机192.168.3.172上8081端口起了一个nginx-docker服务 前置条件&#x…

HarmonyOS自定义弹出对话框CustomDialog并传递变量

HarmonyOS定义了一系列弹窗反馈类的组件​ 和前端开发框架VUE3配套生态库element plus中的提供各种组件相比,还是要少一些。可能是手机端操作和PC端操作的差异导致的​ 如果内置的弹窗不满足要求,可以基于CustomDialog自定义出各种个性化的反馈组件。 首…

【开源】基于JAVA语言的假日旅社管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 系统介绍2.2 QA 问答 三、系统展示四、核心代码4.1 查询民宿4.2 新增民宿评论4.3 查询民宿新闻4.4 新建民宿预订单4.5 查询我的民宿预订单 五、免责说明 一、摘要 1.1 项目介绍 基于JAVAVueSpringBootMySQL的假日旅社…

【自动化测试】Pytest+Appium+Allure 做 UI 自动化的那些事

文本主要介绍下 PytestAllureAppium 记录一些过程和经历。 法主要用了啥: Python3 Appium Allure-pytest Pytest Appium 不常见却好用的方法 Appium 直接执行 adb shell 方法 #Appium 启动时增加 --relaxed-security 参数 Appium 即可执行类似adb shell的方法 appium -p 4…

蓝凌OA sysUiExtend.do 任意文件上传漏洞复现

0x01 产品简介 蓝凌核心产品EKP平台定位为新一代数字化生态OA平台,数字化向纵深发展,正加速构建产业互联网,对企业协作能力提出更高要求,蓝凌新一代生态型OA平台能够支撑办公数字化、管理智能化、应用平台化、组织生态化,赋能大中型组织更高效的内外协作与管理,支撑商业…

TCP 异常断开连接【重点】

参考链接 https://xiaolincoding.com/network/3_tcp/tcp_down_and_crash.html https://xiaolincoding.com/network/3_tcp/tcp_unplug_the_network_cable.html#%E6%8B%94%E6%8E%89%E7%BD%91%E7%BA%BF%E5%90%8E-%E6%9C%89%E6%95%B0%E6%8D%AE%E4%BC%A0%E8%BE%93 关键词&#xff1a…

2023 IoTDB Summit:中核武汉核电运行技术股份有限公司主管工程师方华建《IoTDB在核电数字化转型过程的应用实践》...

12 月 3 日,2023 IoTDB 用户大会在北京成功举行,收获强烈反响。本次峰会汇集了超 20 位大咖嘉宾带来工业互联网行业、技术、应用方向的精彩议题,多位学术泰斗、企业代表、开发者,深度分享了工业物联网时序数据库 IoTDB 的技术创新…

代码随想录 Leetcode637. 二叉树的层平均值

题目&#xff1a; 代码(首刷自解 2024年1月24日&#xff09;&#xff1a; class Solution { public:vector<double> averageOfLevels(TreeNode* root) {vector<double> res {};if(root nullptr) return res;queue<TreeNode*> que;TreeNode* cur root;que…

Linux简介

Unix的特点&#xff1a; Unix很简洁&#xff0c;Unix只提供几百个系统调用&#xff0c;并且每个调用都有明确的目的。一切皆文件&#xff0c;对数据和对文件都是通过相同的系统调用接口&#xff1a;open&#xff08;&#xff09;&#xff0c;read&#xff08;&#xff09;&…