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 相关文章推荐
Prototype 学习 工具函数学习($方法)
Jul 12 Javascript
jquery checkbox实现单选小例
Nov 27 Javascript
jQuery超酷平面式时钟效果代码分享
Mar 30 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
Mar 22 Javascript
基于jQuery实现文字打印动态效果
Apr 21 jQuery
基于Bootstrap框架菜鸟入门教程(推荐)
Sep 17 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
Sep 19 Javascript
vue配置请求本地json数据的方法
Apr 11 Javascript
微信小程序用户信息encryptedData详解
Aug 24 Javascript
vue中node_modules中第三方模块的修改使用详解
May 31 Javascript
js实现拖动缓动效果
Jan 13 Javascript
three.js显示中文字体与tween应用详析
Jan 04 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简单封装了一些常用JS操作
2007/02/25 PHP
php绘制一条弧线的方法
2015/01/24 PHP
JS求平均值的小例子
2013/11/29 Javascript
jQuery对象的selector属性用法实例
2014/12/27 Javascript
JQuery球队选择实例
2015/05/18 Javascript
Javascript编写2048小游戏
2015/07/07 Javascript
解决JS请求服务器gbk文件乱码的问题
2015/10/16 Javascript
JS函数的几种定义方式分析
2015/12/17 Javascript
详解js中class的多种函数封装方法
2016/01/03 Javascript
javascript实现简单的全选和反选功能
2016/01/05 Javascript
Javascript Function.prototype.bind详细分析
2016/12/29 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
react实现pure render时bind(this)隐患需注意!
2017/03/09 Javascript
vue项目中导入swiper插件的方法
2018/01/30 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
2019/02/27 Javascript
d3.js实现图形拖拽
2019/12/19 Javascript
vue element-ui实现input输入框金额数字添加千分位
2019/12/29 Javascript
在Vue中使用mockjs代码实例
2020/11/25 Vue.js
JQuery绑定事件四种实现方法解析
2020/12/02 jQuery
python3读取MySQL-Front的MYSQL密码
2017/05/03 Python
Python向日志输出中添加上下文信息
2017/05/24 Python
Django REST framework内置路由用法
2019/07/26 Python
一篇文章弄懂Python中的可迭代对象、迭代器和生成器
2019/08/12 Python
详解在Python中以绝对路径或者相对路径导入文件的方法
2019/08/30 Python
pytorch中图像的数据格式实例
2020/02/11 Python
Python使用pdb调试代码的技巧
2020/05/03 Python
Python自动巡检H3C交换机实现过程解析
2020/08/14 Python
python如何调用百度识图api
2020/09/29 Python
Python绘制K线图之可视化神器pyecharts的使用
2021/03/02 Python
国际礼品店:GiftsnIdeas
2018/05/03 全球购物
2014年商场超市庆元旦活动方案
2014/02/14 职场文书
党支部遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
应届毕业生求职信范文
2015/03/19 职场文书
教你用python实现一个无界面的小型图书管理系统
2021/05/21 Python
Python并发编程实例教程之线程的玩法
2021/06/20 Python
SpringBoot 整合mongoDB并自定义连接池的示例代码
2022/02/28 MongoDB