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 相关文章推荐
Prototype1.5 rc2版指南最后一篇之Position
Jan 10 Javascript
User Scripts: Video Download by User Scripts
May 14 Javascript
关于jQuery UI 使用心得及技巧
Oct 10 Javascript
js如何判断不同系统的浏览器类型
Oct 28 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
Nov 26 Javascript
javascript函数重载解决方案分享
Feb 19 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
Apr 30 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
Mar 31 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
Mar 28 Javascript
Vue三层嵌套路由的示例代码
May 05 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
Sep 19 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
Aug 13 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 array_merge下进行数组合并的代码
2008/07/22 PHP
PHP基础知识介绍
2013/09/17 PHP
php解析url的三个示例
2014/01/20 PHP
PHP的PDO预处理语句与存储过程
2019/01/27 PHP
prototype 学习笔记整理
2009/07/17 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/03 Javascript
Jquery 绑定时间实现代码
2011/05/03 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
2014/01/10 Javascript
js查找某元素中的所有图片地址的方法
2014/01/16 Javascript
无刷新上传文件并返回自定义值
2015/06/11 Javascript
jQuery使用$.ajax进行即时验证的方法
2015/12/08 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
2016/08/02 Javascript
微信小程序 图片宽度自适应的实现
2017/04/06 Javascript
详解Vue 非父子组件通信方法(非Vuex)
2017/05/24 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
2017/08/17 Javascript
微信小程序 获取session_key和openid的实例
2017/08/17 Javascript
浅析Visual Studio Code断点调试Vue
2018/02/27 Javascript
Vuepress 搭建带评论功能的静态博客的实现
2019/02/17 Javascript
详解React服务端渲染从入门到精通
2019/03/28 Javascript
vue实现标签云效果的方法详解
2019/08/28 Javascript
Python批量转换文件编码格式
2015/05/17 Python
Python脚本简单实现打开默认浏览器登录人人和打开QQ的方法
2016/04/12 Python
python脚本监控docker容器
2016/04/27 Python
python3中函数参数的四种简单用法
2018/07/09 Python
使用GitHub和Python实现持续部署的方法
2019/05/09 Python
python爬虫学习笔记之pyquery模块基本用法详解
2020/04/09 Python
AmazeUI 按钮交互的实现示例
2020/08/24 HTML / CSS
VLAN和VPN有什么区别?分别实现在OSI的第几层?
2014/12/23 面试题
简述安装Slackware Linux系统的过程
2012/01/12 面试题
英语自荐信范文
2013/12/11 职场文书
学校安全责任书
2014/04/14 职场文书
建筑安全责任书范本
2014/07/24 职场文书
先进党支部申报材料
2014/12/24 职场文书
2015年爱牙日活动总结
2015/03/23 职场文书
2015年社区纪检工作总结
2015/04/21 职场文书
检讨书格式范文
2015/05/07 职场文书