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循环滚动图片代码
Dec 08 Javascript
jquery实现非叠加式的搜索框提示效果
Jan 07 Javascript
JS深度拷贝Object Array实例分析
Mar 31 Javascript
用jQuery向div中添加Html文本内容的简单实现
Jul 13 Javascript
详解开源的JavaScript插件化框架MinimaJS
Oct 26 Javascript
纯JavaScript实现实时反馈系统时间
Oct 26 Javascript
js实现登录与注册界面
Nov 01 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
微信小程序文字显示换行问题
Jul 28 Javascript
vue使用nprogress实现进度条
Dec 09 Javascript
extjs图形绘制之饼图实现方法分析
Mar 06 Javascript
解决vue 退出动画无效的问题
Aug 09 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通用防注入程序 推荐
2011/02/26 PHP
PHP中常用的字符串格式化函数总结
2014/11/19 PHP
PHP邮件群发机实现代码
2016/02/16 PHP
Laravel5中防止XSS跨站攻击的方法
2016/10/10 PHP
php从数据库读取数据,并以json格式返回数据的方法
2018/08/21 PHP
下拉列表select 由左边框移动到右边示例
2013/12/04 Javascript
js调试系列 源码定位与调试[基础篇]
2014/06/18 Javascript
使用jquery如何获取时间
2016/10/13 Javascript
Bootstrap简单表单显示学习笔记
2016/11/15 Javascript
Vue实现动态响应数据变化
2017/04/28 Javascript
基于zepto.js实现手机相册功能
2017/07/11 Javascript
vue+axios+element ui 实现全局loading加载示例
2018/09/11 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
2019/06/17 Javascript
浅谈vue项目用到的mock数据接口的两种方式
2019/10/09 Javascript
vue登录以及权限验证相关的实现
2019/10/25 Javascript
js 递归json树实现根据子id查父id的方法分析
2019/11/08 Javascript
vue 检测用户上传图片宽高的方法
2020/02/06 Javascript
javascript实现扫雷简易版
2020/08/18 Javascript
Vue指令实现OutClick的示例
2020/11/16 Javascript
python实现跨文件全局变量的方法
2014/07/07 Python
CentOS 6.X系统下升级Python2.6到Python2.7 的方法
2016/10/12 Python
Python爬取十篇新闻统计TF-IDF
2018/01/03 Python
python安装教程
2018/02/28 Python
Django安装配置mysql的方法步骤
2018/10/15 Python
python scrapy重复执行实现代码详解
2019/12/28 Python
mac使用python识别图形验证码功能
2020/01/10 Python
python中remove函数的踩坑记录
2021/01/04 Python
python制作微博图片爬取工具
2021/01/16 Python
Brasty波兰:香水、化妆品、手表网上商店
2019/04/15 全球购物
通信工程专业个人找工作求职信范文
2013/09/21 职场文书
2014小学植树节活动总结
2014/03/10 职场文书
成品库仓管员岗位职责
2014/04/06 职场文书
幼儿园八一建军节活动方案
2014/08/27 职场文书
推普周活动总结
2014/08/28 职场文书
2014年保管员工作总结
2014/11/18 职场文书
python如何将mat文件转为png
2022/07/15 Python