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 相关文章推荐
JavaScript 读取元素的CSS信息的代码
Feb 07 Javascript
JavaScript类库D
Oct 24 Javascript
JS实现FLASH幻灯片图片切换效果的方法
Mar 04 Javascript
jquery实现表单验证简单实例演示
Nov 23 Javascript
JavaScript表单验证开发
Nov 23 Javascript
Vue.js之slot深度复制详解
Mar 10 Javascript
基于Vue实现支持按周切换的日历
Sep 24 Javascript
vue项目总结之文件夹结构配置详解
Dec 13 Javascript
前端MVVM框架解析之双向绑定
Jan 24 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
Apr 09 Javascript
基于JS实现一个随机生成验证码功能
May 29 Javascript
node.js 如何监视文件变化
Sep 01 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
xml和web特殊字符
2009/04/28 Javascript
Javascript 判断函数类型完美解决方案
2009/09/02 Javascript
JavaScript Cookie的读取和写入函数
2009/12/08 Javascript
JavaScript中的this实例分析
2011/04/28 Javascript
jQuery 联动日历实现代码
2012/05/31 Javascript
JS中 用户登录系统的解决办法
2013/04/15 Javascript
jQuery判断当前点击的是第几个li的代码
2014/09/26 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
2014/12/17 Javascript
jQuery中extend函数详解
2015/07/13 Javascript
jQuery获取URL请求参数的方法
2015/07/18 Javascript
js带闹铃功能的倒计时代码
2016/09/29 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
2017/02/27 Javascript
javascript 中select框触发事件过程的分析
2017/08/01 Javascript
35个最好用的Vue开源库(史上最全)
2019/01/03 Javascript
JavaScript判断浏览器运行环境的详细方法
2019/06/30 Javascript
小程序自定义弹框效果
2020/11/16 Javascript
Python中还原JavaScript的escape函数编码后字符串的方法
2014/08/22 Python
深入Python解释器理解Python中的字节码
2015/04/01 Python
python3.5使用tkinter制作记事本
2016/06/20 Python
简单谈谈Python流程控制语句
2016/12/04 Python
解决出现Incorrect integer value: '' for column 'id' at row 1的问题
2017/10/29 Python
Python 实现一行输入多个值的方法
2018/04/21 Python
在Python中分别打印列表中的每一个元素方法
2018/11/07 Python
浅析python内置模块collections
2019/11/15 Python
HTML5 video 事件应用示例
2014/09/11 HTML / CSS
Smallable英国家庭概念店:设计师童装及家居装饰
2017/07/05 全球购物
土木工程实习生自我鉴定
2013/09/19 职场文书
大学本科毕业生求职信范文
2013/12/18 职场文书
促销活动总结怎么写
2014/06/25 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书
党的群众路线教育实践活动个人对照检查材料(教师)
2014/11/04 职场文书
教师信息技术学习心得体会
2016/01/21 职场文书
导游词之塘栖古镇
2019/12/04 职场文书
浅析Django接口版本控制
2021/06/26 Python
python 多态 协议 鸭子类型详解
2021/11/27 Python
Java版 单机五子棋
2022/05/04 Java/Android