webpack学习教程之publicPath路径问题详解

转载  发布时间:2017年06月17日 11:18:57   作者:心悦诚服555   我要评论

这篇文章主要给大家介绍了webpack学习教程之publicPath路径问题的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。

本文主要给大家介绍了关于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不能自动刷新

总结

以上就是这文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

相关文章

  • JS按回车键实现登录的方法

    JS按回车键实现登录的方法

    这篇文章主要介绍了JS按回车键实现登录的方法,在web程序设计中非常实用的技巧,可用于表单提交的情况,具有很好的用户体验,需要的朋友可以参考下
    2014-08-08
  • 关于Bootstrap按钮组件消除黄框的方法

    关于Bootstrap按钮组件消除黄框的方法

    这篇文章主要介绍了Bootstrap按钮组件消除黄框的方法,需要的朋友可以参考下
    2017-05-05
  • js AspxButton的客户端操作

    js AspxButton的客户端操作

    processOnServer使您可以指定当前Button应该处理客户端的事件或服务器端事件。
    2009-06-06
  • 浅析javascript函数表达式

    浅析javascript函数表达式

    这篇文章主要向大家详细介绍了javascript函数表达式,帮助大家理解javascript函数表达式,感兴趣的朋友可以参考一下
    2016-02-02
  • ES6(ECMAScript 6)新特性之模板字符串用法分析

    ES6(ECMAScript 6)新特性之模板字符串用法分析

    这篇文章主要介绍了ES6(ECMAScript 6)新特性之模板字符串用法,简单介绍了ES6模板字符串的概念、功能并结合实例形式分析了ES6模板字符串的用法,需要的朋友可以参考下
    2017-04-04
  • javascript操作cookie

    javascript操作cookie

    本文主要介绍了js对cookie的操作:js设置cookie;js获取cookie;给cookie设置终止日期;删除cookie 等,具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • 如何判断鼠标是否在DIV的区域内

    如何判断鼠标是否在DIV的区域内

    通过mouseover,mouseout来触发事件,才判断鼠标是否在该区域。 但是这种方法的局限性就是,必须要触发mouseover,或mouseout,mouseleave事件才能知道
    2013-11-11
  • JavaScript截取字符串的2个函数介绍

    JavaScript截取字符串的2个函数介绍

    这篇文章主要介绍了JavaScript截取字符串的2个函数介绍,它们分别是substring和substr函数,本文用实例讲解了它们的用法,需要的朋友可以参考下
    2014-08-08
  • 前台js调用后台方法示例

    前台js调用后台方法示例

    本文为大家介绍下前台js调用后台方法,下面有个不错的示例,喜欢的朋友可以参考下
    2013-12-12
  • 值得分享的最全面Bootstrap快速人门案例

    值得分享的最全面Bootstrap快速人门案例

    这篇文章主要为大家详细介绍了最全面的前端插件Bootstrap快速人门案例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12

最新评论