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不能自动刷新

publicPath路径问题的更多相关文章

  1. webpack学习笔记——publicPath路径问题

    output: { filename: "[name].js", path:path.resolve(__dirname,"build") } 如果没有指定pu ...

  2. webpack——publicPath路径问题

    output: { filename: "[name].js", path:path.resolve(__dirname,"build") } 如果没有指定pu ...

  3. 理解webpack中的publicPath

    outPut中的publicPath 默认值: 空字符串. publicPath是非常有必要配置的,他是项目中引入静态资源(js.css)时的基础路径. 例如: outPut.publicPath = ...

  4. webpack4.0各个击破（3）—— Assets篇

    目录 一. Assets资源的基本处理需求 二. webpack处理引用资源 2.1 资源打标 2.2 引用优化 2.3 sprites雪碧图合成 2.4 图片压缩及其他 webpack作为前端最火的 ...

  5. 用webpack4从零开始构建react脚手架

    用webpack4从零开始构建react脚手架 使用脚手架 git clone git@github.com:xiehaitao0229/react-wepack4-xht.git` `cd reac ...

  6. webpack简介与使用

    欢迎小伙伴们为 前端导航仓库 点star https://github.com/pfan123/fr...前端导航平台访问 CommonJS 和 AMD 是用于 JavaScript 模块管理的两大规 ...

  7. webpack4-用之初体验，一起敲它十一遍

    众所周知,webpack进入第4个大版本已经有2个月的时间了,而且webpack团队升级更新的速度也是非常的惊人 在写下如下内容的时候webpack已经出到了4.6的版本了,剑指5.0应该是指日可待了 ...

  8. webpack4配置

    一.安装webpack 需要先在项目中npm init初始化一下,生成package.json 建议node版本安装到8.2以上 // webpack4中除了正常安装webpack之外,需要再单独安一 ...

  9. Ant Design Vue项目解析-前言

    源码系列文章很长时间没有更新,一是在考虑文章用什么方式写质量会更高,用什么方式总结更易于扩展和总结知识点,加上工作.看书.健身占用的时间比较多所以也没时间去整理.最近在网上看到一篇文章感觉这种方式不错 ...

随机推荐

  1. 13- APP接口测试以及postman使用

    postman安装与操作 ---------------------- 接口操作图片 -------------------- 一.postman操作key值:来源于聚合   请求-->聚合-- ...

  2. Spring Cloud 微服务架构整理记录与示例首页

    ---------------------------目录-------------------------------- 一.SpringCloud系列组件实战(Eureka.Ribbon.Hyst ...

  3. 从苏宁电器到卡巴斯基第25篇：难忘的三年硕士时光 III

    阴差阳错,走上了讲师的道路 时间已经来到了2015年的1月,我的找工作之路也是屡败屡战,屡战屡败.金山.百度以及腾讯不约而同地不要我,使得我对于自己的未来充满了迷茫.尽管才研二而已,可是对于我这种没有 ...

  4. SQLServer的XP_CmdShell提权

    当我们拿到了某个网站SQLServer数据库的SA权限用户密码的话,我们就可以使用XP_CmdShell提权了. 开启xp_cmdshell exec sp_configure 'show advan ...

  5. FreeBSD系统基本操作

    1:系统安装 2:关机与重启命令 立即关机,但是不关闭电源: shutdown -h now 立即关机,并且关闭电源: shutdown -p now 重启命令 shutdown -r now

  6. base64stego 还不懂base64的隐写，详解15行代码带你领略

    网上写了好多关于xctf MISC新手篇的base64Stego隐写的教程,但大都不太清楚,基本上都是讲了一段隐写原理,直接上代码了.但是代码是这道题的关键,代码讲了如何解码这个隐写的完整流程,这次我 ...

  7. str.isdigit()可以判断变量是否为数字

    字符串.isdigit()可以判断变量是否为数字 是则输出True 不是则输出False 好像只能字符串

  8. 记一次 .NET 某外贸Web站 内存泄漏分析

    一:背景 1. 讲故事 上周四有位朋友加wx咨询他的程序内存存在一定程度的泄漏,并且无法被GC回收,最终机器内存耗尽,很尴尬. 沟通下来,这位朋友能力还是很不错的,也已经做了初步的dump分析,发现了 ...

  9. [linux] Git基本概念&操作

    1.基本概念 版本控制系统:一种软体工程技巧,籍以在开发的过程中,确保由不同人所编写的同一项目代码都得到更新.并追踪.记录整个开发过程. 集中式(SVN)/ 分布式(GIT)版本控制系统:SVN的版本 ...

  10. [Python] 网络

    1.应用概念 应用层(Application Layer):将原始信息进行规范化描述,进而通过标准化接口与传输层对接 传输层(Transport Layer):实现信息的切分和重组,以及应用程序间的对 ...