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 相关文章推荐
aspx中利用js实现确认删除代码
Jul 22 Javascript
js对象数组按属性快速排序
Jan 31 Javascript
Javascript实现简单二级下拉菜单实例
Jun 15 Javascript
[原创]推荐10款最热门jQuery UI框架
Aug 19 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
Oct 29 Javascript
对比分析json及XML
Nov 28 Javascript
原生js页面滚动延迟加载图片
Dec 20 Javascript
把普通对象转换成json格式的对象的简单实例
Jul 04 Javascript
JavaScript中数据类型转换总结
Dec 25 Javascript
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
JS实现访问DOM对象指定节点的方法示例
Apr 04 Javascript
小程序新版订阅消息模板消息
Dec 31 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
用PHP+MySQL搭建聊天室功能实例代码
2012/08/20 PHP
PHP命令行脚本接收传入参数的三种方式
2014/08/20 PHP
PHP应用跨时区功能的实现方法
2019/03/21 PHP
PHP如何通过date() 函数格式化显示时间
2020/11/13 PHP
JavaScript语法着色引擎(demo及打包文件下载)
2007/06/13 Javascript
JS的document.all函数使用示例
2013/12/30 Javascript
js图片轮播效果实现代码
2020/04/18 Javascript
Jqgrid之强大的表格插件应用
2015/12/02 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
2015/12/30 Javascript
用window.onerror捕获并上报Js错误的方法
2016/01/27 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
2016/06/08 Javascript
JavaScript中点击事件的写法
2016/06/28 Javascript
Bootstrap基本模板的使用和理解1
2016/12/14 Javascript
5 种JavaScript编码规范
2018/01/30 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
2019/04/17 Javascript
vue实现路由监听和参数监听
2019/10/29 Javascript
Webpack5正式发布,有哪些新特性
2020/10/12 Javascript
[08:17]Ti9 现场cosplay
2019/09/10 DOTA
python 文件与目录操作
2008/12/24 Python
利用打码兔和超人打码自封装的打码类分享
2014/03/16 Python
pycharm 使用心得(三)Hello world!
2014/06/05 Python
python3连接MySQL数据库实例详解
2018/05/24 Python
15行Python代码实现网易云热门歌单实例教程
2019/03/10 Python
flask/django 动态查询表结构相同表名不同数据的Model实现方法
2019/08/29 Python
Python使用pymysql模块操作mysql增删改查实例分析
2019/12/19 Python
Anaconda使用IDLE的实现示例
2020/09/23 Python
解决HTML5手机端页面缩放的问题
2017/10/27 HTML / CSS
EJB与JAVA BEAN的区别
2016/08/29 面试题
介绍一些UNIX常用简单命令
2014/11/11 面试题
优秀共产党员先进事迹
2014/01/27 职场文书
企业演讲比赛主持词
2014/03/18 职场文书
2014年汽车销售工作总结
2014/12/01 职场文书
《颐和园》教学反思
2016/02/19 职场文书
工伤调解协议书
2016/03/21 职场文书
Python爬虫实战之爬取携程评论
2021/06/02 Python
详解使用内网穿透工具Ngrok代理本地服务
2022/03/31 Servers