Webpack path与publicPath的区别详解


Posted in Javascript onMay 03, 2018

前言

在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="/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)

重要

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
初学js插入节点appendChild insertBefore使用方法
Jul 04 Javascript
js中字符替换函数String.replace()使用技巧
Aug 14 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
Mar 01 Javascript
jQuery随机密码生成的方法
Mar 09 Javascript
jQuery Html控件基本操作(日常收集整理)
Mar 11 Javascript
纯js实现的积木(div层)拖动功能示例
Jul 19 Javascript
AngualrJs清除定时器遇到的坑
Oct 13 Javascript
微信小程序 如何引入外部字体库iconfont的图标
Jan 31 Javascript
浅谈React组件之性能优化
Mar 02 Javascript
Vue 动态设置路由参数的案例分析
Apr 24 Javascript
React精髓!一篇全概括小结(急速)
May 23 Javascript
Js跳出两级循环方法代码实例
Sep 22 Javascript
Webpack中publicPath路径问题详解
May 03 #Javascript
Angular Renderer (渲染器)的具体使用
May 03 #Javascript
react router4+redux实现路由权限控制的方法
May 03 #Javascript
vue.js学习笔记之v-bind和v-on解析
May 03 #Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 #jQuery
详解VueJs中的V-bind指令
May 03 #Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
May 02 #Javascript
You might like
全国FM电台频率大全 - 23 四川省
2020/03/11 无线电
php实现mysql数据库备份类
2008/03/20 PHP
php实现的二分查找算法示例
2017/06/20 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
PHP的imageTtfText()函数深入详解
2021/03/03 PHP
Javascript调用XML制作连动下拉列表框
2006/06/25 Javascript
THREE.JS入门教程(2)着色器-上
2013/01/24 Javascript
js用拖动滑块来控制图片大小的方法
2015/02/27 Javascript
AngularJS基础学习笔记之控制器
2015/05/10 Javascript
jquery实现ajax加载超时提示的方法
2016/07/23 Javascript
Angular2 路由问题修复详解
2017/03/01 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
2017/05/10 Javascript
浅谈angular4 ng-content 中隐藏的内容
2017/08/18 Javascript
Vue+Express实现登录状态权限验证的示例代码
2019/05/05 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
浅谈vue权限管理实现及流程
2020/04/23 Javascript
[42:52]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
python爬虫常用的模块分析
2014/08/29 Python
Python编程实现二分法和牛顿迭代法求平方根代码
2017/12/04 Python
Python 循环终止语句的三种方法小结
2019/06/24 Python
基于python判断目录或者文件代码实例
2019/11/29 Python
Python将列表中的元素转化为数字并排序的示例
2019/12/25 Python
Python 基于FIR实现Hilbert滤波器求信号包络详解
2020/02/26 Python
python爬虫中PhantomJS加载页面的实例方法
2020/11/12 Python
Python 按比例获取样本数据或执行任务的实现代码
2020/12/03 Python
Vision Directa智利眼镜网:框架眼镜、隐形眼镜和名牌太阳眼镜
2016/11/23 全球购物
美国顶级防滑鞋:Shoes For Crews
2017/03/27 全球购物
Hoka One One法国官网:美国专业跑鞋品牌
2018/12/29 全球购物
世界各地的旅游、观光和活动:Isango!
2019/10/29 全球购物
《绿色蝈蝈》教学反思
2014/03/02 职场文书
房地产公司见习自我鉴定
2014/04/28 职场文书
在职人员跳槽求职信
2015/03/20 职场文书
2015年学校政教处工作总结
2015/05/26 职场文书
严以用权学习心得体会
2016/01/12 职场文书
win10电脑双屏显示一个黑屏怎么办?win10电脑双屏显示一个黑屏解决方法
2022/07/15 数码科技
el-table-column 内容不自动换行的解决方法
2022/08/14 Vue.js