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事件重复绑定的快速解决方法
Jan 03 Javascript
JsRender for object语法简介
Oct 31 Javascript
jQuery中:disabled选择器用法实例
Jan 04 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
Feb 21 Javascript
动态统计当前输入内容的字节、字符数的实例详解
Oct 27 Javascript
深入研究React中setState源码
Nov 17 Javascript
AnglarJs中的上拉加载实现代码
Feb 08 Javascript
JavaScript多种页面刷新方法小结
Apr 04 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
Jun 15 Javascript
Weex开发之地图篇的具体使用
Oct 16 Javascript
在微信小程序中使用mqtt服务的方法
Dec 13 Javascript
angula中使用iframe点击后不执行变更检测的问题
May 10 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+.htaccess实现全站静态HTML文件GZIP压缩传输(一)
2007/02/15 PHP
destoon常用的安全设置概述
2014/06/21 PHP
php array_walk_recursive 使用自定的函数处理数组中的每一个元素
2016/11/16 PHP
js 表单验证方法(实用)
2009/04/28 Javascript
Package.js  现代化的JavaScript项目make工具
2012/05/23 Javascript
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
使用npm发布Node.JS程序包教程
2015/03/02 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
2015/09/15 Javascript
jQuery侧边栏实现代码
2016/05/06 Javascript
微信小程序 教程之条件渲染
2016/10/18 Javascript
详解angular ui-grid之过滤器设置
2017/06/07 Javascript
vue中各选项及钩子函数执行顺序详解
2018/08/25 Javascript
javscript 数组扁平化的实现
2020/02/03 Javascript
Python3指定路径寻找符合匹配模式文件
2015/05/22 Python
Python复制Word内容并使用格式设字体与大小实例代码
2018/01/22 Python
Python学习_几种存取xls/xlsx文件的方法总结
2018/05/03 Python
python 实现登录网页的操作方法
2018/05/11 Python
Python双向循环链表实现方法分析
2018/07/30 Python
python实现淘宝秒杀脚本
2020/06/23 Python
详解Python Matplotlib解决绘图X轴值不按数组排序问题
2019/08/05 Python
Django 导出项目依赖库到 requirements.txt过程解析
2019/08/23 Python
详解有关PyCharm安装库失败的问题的解决方法
2020/02/02 Python
基于python实现简单网页服务器代码实例
2020/09/14 Python
学生如何注册Pycharm专业版以及pycharm的安装
2020/09/24 Python
html5 datalist 选中option选项后的触发事件
2020/03/05 HTML / CSS
你的自行车健身专家:FaFit24
2016/11/16 全球购物
Bally澳大利亚官网:瑞士奢侈品牌
2018/11/01 全球购物
澳大利亚设计的优质鞋类和适合澳大利亚生活方式的服装:Rivers
2019/04/23 全球购物
电子装配专业毕业生求职信
2014/04/23 职场文书
奉献爱心演讲稿
2014/09/04 职场文书
超级礼物观后感
2015/06/15 职场文书
母亲节主题班会
2015/08/14 职场文书
学校2016年九九重阳节活动总结
2016/04/01 职场文书
大学生如何逃脱“毕业季创业队即散伙”魔咒?
2019/08/19 职场文书
Python语言内置数据类型
2022/02/24 Python
Go语言 详解net的tcp服务
2022/04/14 Golang