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. hdu2833 Floyd + dp

    题意:      给你一个无向图,给你两组起点和终点,问你这两组起点和终点的最短路上最多有多少个交点... 思路:      开一个数组dp[i][j]记录最短路上i,j之间的点有多少个,这个数组是根 ...

  2. Andrew Ng机器学习算法入门(二):机器学习分类

    机器学习的定义 Arthur Samuel给出的定义,Field of Study that gives computers the ability to learn without being ex ...

  3. 痞子衡嵌入式：可通过USB Device Path来唯一指定i.MXRT设备进行ROM/Flashloader通信

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是通过USB Device Path来唯一指定i.MXRT设备进行ROM/Flashloader通信. i.MXRT系列高性能微控制器从2 ...

  4. Instagram 为什么不用redis

    Hi 我还是大粽子 碎碎念 让我比较兴奋的就是这段时间的文章,被感兴趣的同学一一关注,关注量上涨就是我的最大动力. 我每周都会输出至少3篇原创文章,希望能被更多的同学关注,点赞,在看,形成习惯. In ...

  5. 使用C#进行数据库增删改查ADO.NET(三)

    文章代码如下: class Program { static void Main (string[] args) { //连接数据库 string connString = "server= ...

  6. Asp.NetCore Web开发之ADO.Net

     Asp.NetCore可以说是.Net平台开发网站的一大利器,最近的一大段时间,就要跟大家分享,如何使用这一利器开发网站项目. 要学习网站开发,首先要学习如何使用ADO.Net进行数据库数据的增删改 ...

  7. 推荐一个不得不知道的 Visual Studio 快捷键

    不得不说,Visual Studio 内置了很多非常棒的快捷键,借助于这些快捷键我们甚至不需要再使用鼠标,就可以快速高效的编写代码,因此学习和熟悉这些快捷键是值得的. 其中有一个快捷键是我非常喜欢,也 ...

  8. ZwQuerySystemInformation枚举内核模块

    在内核中通过调用此函数来枚举windows系统中已经加载的内核模块. NTSTATUS ZwQuerySystemInformation ( SYSTEM_INFORMATION_CLASS Syst ...

  9. ALPHA任务拆解

    项目 内容 这个作业属于哪个课程 BUAA2020软件工程 这个作业的要求在哪里 作业要求 我们在这个课程的目标是 学会团队合作,共同开发一个完整的项目 这个作业在哪个具体方面帮助我们实现目标 团队任 ...

  10. 记一次 .NET 某HIS系统后端服务 内存泄漏分析

    一:背景 1. 讲故事 前天那位 his 老哥又来找我了,上次因为CPU爆高的问题我给解决了,看样子对我挺信任的,这次另一个程序又遇到内存泄漏,希望我帮忙诊断下. 其实这位老哥技术还是很不错的,他既然 ...