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 new 需不需要继续使用
Jul 02 Javascript
jQuery 学习第七课 扩展jQuery的功能 插件开发
May 17 Javascript
Jquery Validate 正则表达式实用验证代码大全
Aug 23 Javascript
JS实现字符串转日期并比较大小实例分析
Dec 09 Javascript
jquery滚动条插件slimScroll使用方法
Feb 09 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
May 17 Javascript
vue addRoutes实现动态权限路由菜单的示例
May 15 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
Sep 12 Javascript
Vue传参一箩筐(页面、组件)
Apr 04 Javascript
JS实现随机抽取三人
Nov 06 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
May 06 Javascript
手写实现JS中的new
Nov 07 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 addslashes和mysql_real_escape_string
2010/01/24 PHP
php echo, print, print_r, sprintf, var_dump, var_expor的使用区别
2013/06/20 PHP
php中多维数组按指定value排序的实现代码
2014/08/19 PHP
Yii学习总结之安装配置
2015/02/22 PHP
控制打印时页眉角的代码
2007/02/08 Javascript
jquery应该如何来设置改变按钮input的onclick事件
2012/12/10 Javascript
JS判断客户端是手机还是PC的2个代码
2014/04/12 Javascript
EasyUi datagrid 实现表格分页
2015/02/10 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
2015/06/19 Javascript
javascript数据结构之二叉搜索树实现方法
2015/11/25 Javascript
JavaScript学习笔记之数组去重
2016/03/23 Javascript
ReactJs快速入门教程(精华版)
2016/11/28 Javascript
js 数据存储和DOM编程
2017/02/09 Javascript
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
在vue中使用css modules替代scroped的方法
2018/03/10 Javascript
基于jquery实现左右上下移动效果
2018/05/02 jQuery
angular 实现的输入框数字千分位及保留几位小数点功能示例
2018/06/19 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
2018/08/14 Javascript
node之本地服务器图片上传的方法示例
2019/03/26 Javascript
Antd下拉选择,自动匹配功能的实现
2020/10/24 Javascript
Vue用mixin合并重复代码的实现
2020/11/27 Vue.js
python获取各操作系统硬件信息的方法
2015/06/03 Python
JSON Web Tokens的实现原理
2017/04/02 Python
使用python快速在局域网内搭建http传输文件服务的方法
2019/11/14 Python
python flask中动态URL规则详解
2019/11/22 Python
解决Alexnet训练模型在每个epoch中准确率和loss都会一升一降问题
2020/06/17 Python
python更新数据库中某个字段的数据(方法详解)
2020/11/18 Python
Bjorn Borg官方网上商店:国际运动时尚品牌
2016/08/27 全球购物
捷克移动配件网上商店:ProMobily.cz
2019/03/15 全球购物
德国2018年度最佳在线药房:Bodfeld Apotheke
2019/11/04 全球购物
应届生的求职推荐信范文
2013/11/30 职场文书
中式餐厅创业计划书范文
2014/01/23 职场文书
公司授权委托书范文
2014/08/02 职场文书
领导干部学习心得体会
2016/01/23 职场文书
2017公司年会主持人开幕词
2016/03/04 职场文书
oracle重置序列从0开始递增1
2022/02/28 Oracle