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 入门讲解1
Apr 15 Javascript
一个很酷的拖动层的js类,兼容IE及Firefox
Jun 23 Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
Aug 05 Javascript
过虑特殊字符输入的js代码
Aug 05 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
Oct 18 Javascript
javascript中的变量作用域以及变量提升详细介绍
Oct 24 Javascript
详解javascript函数的参数
Nov 10 Javascript
JavaScript地理位置信息API
Jun 11 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
Aug 27 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
Aug 07 Javascript
微信分享invalid signature签名错误踩过的坑
Apr 11 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下通过exec获得计算机的唯一标识[CPU,网卡 MAC地址]
2011/06/09 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
js 实现日期灵活格式化的小例子
2013/07/14 Javascript
关闭浏览器时提示onbeforeunload事件
2013/12/25 Javascript
简介AngularJS中$http服务的用法
2016/02/06 Javascript
javascript瀑布流布局实现方法详解
2016/02/17 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
2016/07/01 Javascript
vue深入解析之render function code详解
2017/07/18 Javascript
js装饰设计模式学习心得
2018/02/17 Javascript
vue自定义正在加载动画的例子
2019/11/14 Javascript
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
Python不规范的日期字符串处理类
2014/06/10 Python
安装ElasticSearch搜索工具并配置Python驱动的方法
2015/12/22 Python
python正则表达式之作业计算器
2016/03/18 Python
python pandas库中DataFrame对行和列的操作实例讲解
2018/06/09 Python
Python实现字典排序、按照list中字典的某个key排序的方法示例
2018/12/18 Python
对pandas写入读取h5文件的方法详解
2018/12/28 Python
Python简易版停车管理系统
2019/08/12 Python
python 实现查询Neo4j多节点的多层关系
2019/12/23 Python
python使用协程实现并发操作的方法详解
2019/12/27 Python
如何基于Python实现自动扫雷
2020/01/06 Python
python 基于PYMYSQL使用MYSQL数据库
2020/12/24 Python
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
支票、地址标签、包装纸和慰问卡:Current Catalog
2018/01/30 全球购物
Fossil美国官网:化石手表、手袋、首饰及配饰
2019/02/17 全球购物
英国自行车商店:AW Cycles
2021/02/24 全球购物
缅怀革命先烈演讲稿
2014/05/14 职场文书
影子教师研修方案
2014/06/14 职场文书
婚前协议书范本
2014/10/27 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
任命书怎么写
2015/03/02 职场文书
时尚女魔头观后感
2015/06/04 职场文书
《多彩的民间艺术》教学反思
2016/02/16 职场文书
详解redis分布式锁的这些坑
2021/05/19 Redis
Python语言中的数据类型-序列
2022/02/24 Python
SQLServer RANK() 排名函数的使用
2022/03/23 SQL Server