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 相关文章推荐
判断脚本加载是否完成的方法
May 26 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
Mar 22 Javascript
js css实现垂直方向自适应的三角提示菜单
Jun 26 Javascript
Bootstrap 源代码分析(未完待续)
Aug 17 Javascript
jQuery树控件zTree使用方法详解(一)
Feb 28 Javascript
JS中使用 after 伪类清除浮动实例
Mar 01 Javascript
利用Angular.js编写公共提示模块的方法教程
May 28 Javascript
Angular4自制一个市县二级联动组件示例
Nov 21 Javascript
详解SPA中前端路由基本原理与实现方式
Sep 12 Javascript
axios实现文件上传并获取进度
Mar 25 Javascript
jquery实现直播弹幕效果
Nov 28 jQuery
JavaScript日期库date-fn.js使用方法解析
Sep 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 模拟GMAIL,HOTMAIL(MSN),YAHOO,163,126邮箱登录的详细介绍
2013/06/18 PHP
php上传图片之时间戳命名(保存路径)
2014/08/15 PHP
浅谈PHP正则中的捕获组与非捕获组
2016/07/18 PHP
PHP的mysqli_stmt_init()函数讲解
2019/01/24 PHP
PHP 数组黑名单/白名单实例代码详解
2019/06/04 PHP
node.js开机自启动脚本文件
2014/12/24 Javascript
JQuery给网页更换皮肤的方法
2015/05/30 Javascript
函数window.open实现关闭所有的子窗口
2015/08/03 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
2016/02/06 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
2016/06/01 Javascript
微信小程序 解决swiper不显示图片的方法
2017/01/04 Javascript
Nodejs 获取时间加手机标识的32位标识实现代码
2017/03/07 NodeJs
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
javascript+html5+css3自定义弹出窗口效果
2017/10/26 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
2018/09/05 Javascript
微信小程序页面缩放式侧滑效果的实现代码
2018/11/15 Javascript
小程序使用wxs解决wxml保留2位小数问题
2019/12/13 Javascript
jQuery实现朋友圈查看图片
2020/09/11 jQuery
JavaScript中layim之整合右键菜单的示例代码
2021/02/06 Javascript
简单介绍Python中的JSON使用
2015/04/28 Python
Python编程实现的简单神经网络算法示例
2018/01/26 Python
Django中的用户身份验证示例详解
2019/08/07 Python
Python中的延迟绑定原理详解
2019/10/11 Python
Python坐标线性插值应用实现
2019/11/13 Python
python实现启动一个外部程序,并且不阻塞当前进程
2020/12/05 Python
拉夫劳伦爱尔兰官方网站:Ralph Lauren爱尔兰
2020/04/10 全球购物
法国春天百货官网:Printemps.com
2020/06/29 全球购物
新闻专业大学生找工作的自我评价
2013/10/30 职场文书
幼儿教师寄语集锦
2014/04/03 职场文书
《雨点儿》教学反思
2014/04/14 职场文书
大学生党员承诺书
2014/05/20 职场文书
希特勒的演讲稿
2014/05/23 职场文书
植物园观后感
2015/06/11 职场文书
本科毕业论文答辩稿
2015/06/23 职场文书
python脚本框架webpy的url映射详解
2021/11/20 Python
Python中的tkinter库简单案例详解
2022/01/22 Python