webpack学习教程之publicPath路径问题详解


Posted in Javascript onJune 17, 2017

本文主要给大家介绍了关于webpack中publicPath路径问题的相关内容,分享出来供大家参考学习,下面来看看详细的介绍:

output: {
  filename: "[name].js",
  path:path.resolve(__dirname,"build")
 }

如果没有指定pubicPath,则引入路径如下

<body>
 <script src="b.js"></script>
</body>

如果有指定publicPath

output: {
  filename: "[name].js",
  path:path.resolve(__dirname,"build"),
  publicPath:"/assets/"
 }

则引入如下

<body>
 <script src="assets/b.js"></script>
</body>

webpack-dev-server环境下,path、publicPath、区别与联系

path:指定编译目录而已(/build/js/),不能用于html中的js引用。

publicPath:虚拟目录,自动指向path编译目录(/assets/ => /build/js/)。html中引用js文件时,必须引用此虚拟路径(但实际上引用的是内存中的文件,既不是/build/js/也不是/assets/)。

===================================================

发布至生产环境:

1.webpack进行编译(当然是编译到/build/js/)

2.把编译目录(/build/js/)下的文件,全部复制到/assets/目录下(注意:不是去修改index.html中引用bundle.js的路径)

之前因为publicPath的路径错误原因,导致webpack-dev-server不能自动刷新

总结

以上就是这文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jQuery 页面载入进度条实现代码
Feb 08 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
Sep 21 Javascript
js select option对象小结
Dec 20 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
Dec 28 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
Mar 29 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
May 31 Javascript
jquery siblings获取同辈元素用法实例分析
Jul 25 Javascript
浅谈js多维数组和hash数组定义和使用
Jul 27 Javascript
判断js的Array和Object的实现方法
Aug 29 Javascript
javascript函数的四种调用模式
Jan 08 Javascript
d3.js实现图形缩放平移
Dec 19 Javascript
手把手带你入门微信小程序新框架Kbone的使用
Feb 25 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
Jun 17 #Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
Jun 17 #Javascript
js简易版购物车功能
Jun 17 #Javascript
Webpack如何引入bootstrap的方法
Jun 17 #Javascript
Webpack执行命令参数详解
Jun 17 #Javascript
JS实现留言板功能
Jun 17 #Javascript
利用vscode编写vue的简单配置详解
Jun 17 #Javascript
You might like
《逃离塔科夫》——“萌新劝退,老手自嗨”的硬核FPS游戏
2020/04/03 其他游戏
Zend Framework动作助手Redirector用法实例详解
2016/03/05 PHP
Laravel模糊查询区分大小写的实例
2019/09/29 PHP
javascript addBookmark 加入收藏 多浏览器兼容
2009/08/15 Javascript
Jquery焦点图实例代码
2014/11/25 Javascript
重写document.write实现无阻塞加载js广告(补充)
2014/12/12 Javascript
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
Bootstrap Modal遮罩弹出层(完整版)
2016/11/21 Javascript
vue2实现可复用的轮播图carousel组件详解
2017/11/27 Javascript
json数据格式常见操作示例
2019/06/13 Javascript
jquery.pager.js分页实现详解
2019/07/29 jQuery
javascript的惯性运动实现代码实例
2019/09/07 Javascript
vue分页插件的使用方法
2019/12/25 Javascript
基于JavaScript实现表格隔行换色
2020/05/08 Javascript
浅谈vant组件Picker 选择器选单选问题
2020/11/04 Javascript
[42:00]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第一场 12.13
2020/12/17 DOTA
Python获取文件所在目录和文件名的方法
2017/01/12 Python
深入理解Python3中的http.client模块
2017/03/29 Python
深入理解Django自定义信号(signals)
2018/10/15 Python
在SQLite-Python中实现返回、查询中文字段的方法
2019/07/17 Python
Python 取numpy数组的某几行某几列方法
2019/10/24 Python
Python文件时间操作步骤代码详解
2020/04/13 Python
使用opencv识别图像红色区域,并输出红色区域中心点坐标
2020/06/02 Python
Python grequests模块使用场景及代码实例
2020/08/10 Python
pip 20.3 新版本发布!即将抛弃 Python 2.x(推荐)
2020/12/16 Python
基于Python 函数和方法的区别说明
2021/03/24 Python
预备党员公开承诺书
2014/05/28 职场文书
项目经理任命书内容
2014/06/06 职场文书
安全环保标语
2014/06/09 职场文书
党员评议个人总结
2014/10/20 职场文书
社区公民道德宣传日活动总结
2015/03/23 职场文书
商业计划书如何写?关键问题有哪些?
2019/07/11 职场文书
Python机器学习三大件之一numpy
2021/05/10 Python
React Native项目框架搭建的一些心得体会
2021/05/28 Javascript
MySQL中int (10) 和 int (11) 的区别
2022/01/22 MySQL
Python时间操作之pytz模块使用详解
2022/06/14 Python