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 相关文章推荐
网页常用特效代码整理
Jun 23 Javascript
javascript基本语法分析说明
Jun 15 Javascript
javascript 打印内容方法小结
Nov 04 Javascript
JavaScript操作DOM元素的childNodes和children区别
Apr 01 Javascript
JavaScript编程中实现对象封装特性的实例讲解
Jun 24 Javascript
微信js-sdk界面操作接口用法示例
Oct 12 Javascript
基于jstree使用AJAX请求获取数据形成树
Aug 29 Javascript
BetterScroll 在移动端滚动场景的应用
Sep 18 Javascript
Vue中computed、methods与watch的区别总结
Apr 10 Javascript
JavaScript中的null和undefined用法解析
Sep 30 Javascript
JS如何定义用字符串拼接的变量
Jul 11 Javascript
JS前端使用canvas实现物体的点选示例
Aug 05 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
桌面中心(一)创建数据库
2006/10/09 PHP
php验证session无效的解决方法
2014/11/04 PHP
php通过文件头判断格式的方法
2016/05/28 PHP
PHP 在数组中搜索给定的简单实例 array_search 函数
2016/06/13 PHP
Js 获取当前日期时间及其它操作实现代码
2021/03/04 Javascript
理解Javascript_01_理解内存分配原理分析
2010/10/11 Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
2010/12/27 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
2014/01/02 Javascript
eclipse导入jquery包后报错的解决方法
2014/02/17 Javascript
jQuery遍历Table应用示例
2014/04/09 Javascript
在for循环中length值是否需要缓存
2015/07/27 Javascript
JavaScript实现标题栏文字轮播效果代码
2015/10/24 Javascript
JS采用绝对定位实现回到顶部效果完整实例
2016/06/20 Javascript
JS实现“隐藏与显示”功能(多种方法)
2016/11/24 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
2017/02/21 Javascript
javascript 删除数组元素和清空数组的简单方法
2017/02/24 Javascript
Js实现京东无延迟菜单效果实例(demo)
2017/06/02 Javascript
ES6扩展运算符的用途实例详解
2017/08/20 Javascript
值得收藏的八个常用的js正则表达式
2018/10/19 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
2019/04/16 Javascript
原生JS实现天气预报
2020/06/16 Javascript
python判断一个集合是否为另一个集合的子集方法
2018/05/04 Python
Django如何配置mysql数据库
2018/05/04 Python
Python 实现文件读写、坐标寻址、查找替换功能
2019/09/11 Python
python使用paramiko实现ssh的功能详解
2020/03/06 Python
python爬虫工具例举说明
2020/11/30 Python
css3的transition效果和transfor效果示例介绍
2013/10/30 HTML / CSS
英国舒适型鞋履品牌:FitFlop
2017/05/17 全球购物
高清安全摄像头系统:Lorex Technology
2018/07/20 全球购物
Blank NYC官网:夹克、牛仔裤等
2020/12/16 全球购物
党的群众路线教育实践活动个人自我剖析材料
2014/10/07 职场文书
实习协议书
2015/01/27 职场文书
琅琊山导游词
2015/02/05 职场文书
银行自荐信怎么写
2015/03/05 职场文书
2017年寒假社区服务活动总结
2016/04/06 职场文书
解决python绘图使用subplots出现标题重叠的问题
2021/04/30 Python