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 相关文章推荐
JavaScript的单例模式 (singleton in Javascript)
Jun 11 Javascript
3种Jquery限制文本框只能输入数字字母的方法
Dec 03 Javascript
JS基于面向对象实现的放烟花效果
May 07 Javascript
js闭包引起的事件注册问题介绍
Mar 29 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
Jul 21 Javascript
JS排序之选择排序详解
Apr 08 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
Vue2.x中利用@font-size引入字体图标报错的解决方法
Sep 28 Javascript
详解微信小程序网络请求接口封装实例
May 02 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
Jun 07 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
Aug 17 Javascript
基于javascript实现日历功能原理及代码实例
May 07 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
PHP中的正规表达式(二)
2006/10/09 PHP
php的dl函数用法实例
2014/11/06 PHP
PHP中使用CURL获取页面title例子
2015/01/07 PHP
PHP实现对二维数组某个键排序的方法
2016/09/14 PHP
php版微信js-sdk支付接口类用法示例
2016/10/12 PHP
yii2中dropDownList实现二级和三级联动写法
2017/04/26 PHP
线路分流自动跳转代码;希望对大家有用!
2006/12/02 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
2012/12/25 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
2013/09/18 Javascript
jquery实现弹出层遮罩效果的简单实例
2014/03/03 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
2015/11/13 Javascript
Bootstrap每天必学之缩略图与警示窗
2015/11/29 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
2016/01/01 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
2016/08/02 Javascript
Bootstrap导航中表单简单实现代码
2017/03/06 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
2018/05/22 jQuery
vue 动态绑定背景图片的方法
2018/08/10 Javascript
Vue的Options用法说明
2020/08/14 Javascript
vue中watch和computed的区别与使用方法
2020/08/23 Javascript
[48:24]完美世界DOTA2联赛循环赛LBZS vs Forest 第一场 10月30日
2020/10/31 DOTA
python实现汉诺塔方法汇总
2016/07/25 Python
【Python】Python的urllib模块、urllib2模块批量进行网页下载文件
2016/11/19 Python
python生成密码字典的方法
2018/07/06 Python
在pycharm 中添加运行参数的操作方法
2019/01/19 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
后端开发使用pycharm的技巧(推荐)
2020/03/27 Python
pycharm2020.1.2永久破解激活教程,实测有效
2020/10/29 Python
python3爬虫中多线程进行解锁操作实例
2020/11/25 Python
去除python中的字符串空格的简单方法
2020/12/22 Python
美国电视购物HSN官网:HSN
2016/09/07 全球购物
哈利波特商店:Harry Potter Shop
2018/11/30 全球购物
物控部经理职务说明书
2014/02/25 职场文书
大学生两会精神学习心得体会
2014/03/10 职场文书
暑期培训随笔感言
2014/03/10 职场文书
会计试用期自我评价
2014/09/19 职场文书
小学教师求职信范文
2015/03/20 职场文书