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 相关文章推荐
让网页根据不同IE版本显示不同的内容
Feb 08 Javascript
JavaScript 设计模式学习 Factory
Jul 29 Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
Nov 19 Javascript
原生js ActiveXObject获取execl里面的值
Nov 01 Javascript
js给onclick赋值传参数的两种方法
Nov 25 Javascript
js实现音频控制进度条功能
Apr 01 Javascript
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
Vue父子组建的简单通信之控制开关Switch的实现
Jun 04 Javascript
vue实现与安卓、IOS交互的方法
Nov 02 Javascript
js实现图片无缝循环轮播
Oct 28 Javascript
微信小程序服务器日期格式化问题
Jan 07 Javascript
vue3种table表格选项个数的控制方法
Apr 14 Vue.js
详解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与XML联手进行网站编程代码实例
2008/07/10 PHP
简单的PHP留言本实例代码
2010/05/09 PHP
php多用户读写文件冲突的解决办法
2013/11/06 PHP
php安装xdebug/php安装pear/phpunit详解步骤(图)
2013/12/22 PHP
php防止sql注入示例分析和几种常见攻击正则表达式
2014/01/12 PHP
php获取服务器端mac和客户端mac的地址支持WIN/LINUX
2014/05/15 PHP
如何使用php脚本给html中引用的js和css路径打上版本号
2015/11/18 PHP
thinkPHP下的widget扩展用法实例分析
2015/12/26 PHP
轻松实现php文件上传功能
2017/02/17 PHP
php+redis实现消息队列功能示例
2019/09/19 PHP
PHP使用Http Post请求发送Json对象数据代码解析
2020/07/16 PHP
Convert Seconds To Hours
2007/06/16 Javascript
JavaScript闭包实例讲解
2014/04/22 Javascript
基于jquery实现的自动补全功能
2015/03/12 Javascript
JS中prototype的用法实例分析
2015/03/19 Javascript
js+css实现上下翻页相册代码分享
2015/08/18 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
2016/07/11 Javascript
Node.js获取前端ajax提交的request信息
2017/02/20 Javascript
node安装--linux下的快速安装教程
2017/03/21 Javascript
javascript 中的继承实例详解
2017/05/05 Javascript
在Vue中如何使用Cookie操作实例
2017/07/27 Javascript
解决在Vue中使用axios用form表单出现的问题
2019/10/30 Javascript
通过js随机函数Math.random实现乱序
2020/05/19 Javascript
Python3读取UTF-8文件及统计文件行数的方法
2015/05/22 Python
从django的中间件直接返回请求的方法
2018/05/30 Python
python程序控制NAO机器人行走
2019/04/29 Python
Python产生一个数值范围内的不重复的随机数的实现方法
2019/08/21 Python
Python 使用元类type创建类对象常见应用详解
2019/10/17 Python
Python性能测试工具Locust安装及使用
2020/12/01 Python
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
2013/01/31 HTML / CSS
Nicole Miller官方网站:纽约女装品牌
2019/09/14 全球购物
化妆师职业生涯规划书
2014/02/16 职场文书
努力学习演讲稿
2014/05/10 职场文书
写字楼租赁意向书
2014/07/30 职场文书
2016年父亲节寄语
2015/12/04 职场文书
改进工作作风心得体会
2016/01/23 职场文书