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. 2020北航OO第二单元总结

    2020北航OO第二单元总结 前言 本单元考察基于多线程的电梯调度问题,成功让我从一个多线程小白到了基本掌握了使用锁来控制线程安全的能力,收获颇多(充分体验了迷茫地de一个又一个死锁bug的痛苦). ...

  2. 753. Cracking the Safe

    There is a box protected by a password. The password is n digits, where each letter can be one of th ...

  3. 【手打】coredns单台使用

    目录: coredns介绍 coredns安装 corendns配置 coredns介绍 CoreDNS 其实就是一个 DNS 服务,而 DNS 作为一种常见的服务发现手段,所以很多开源项目以及工程师 ...

  4. 洛谷P1085 不高兴的津津

    题目描述 津津上初中了.妈妈认为津津应该更加用功学习,所以津津除了上学之外,还要参加妈妈为她报名的各科复习班.另外每周妈妈还会送她去学习朗诵.舞蹈和钢琴.但是津津如果一天上课超过八个小时就会不高兴,而 ...

  5. DVWA之CSRF(跨站请求伪造攻击)

    目录 Low Middle High Impossible Low 源代码: <?php if( isset( $_GET[ 'Change' ] ) ) { // Get input $pas ...

  6. Tomcat PUT方法任意文件上传(CVE-2017-12615)

    目录 漏洞复现: 漏洞利用工具: 漏洞环境:当 Tomcat运行在Windows操作系统,且启用了HTTP PUT请求方法(例如,将 readonly 初始化参数由默认值设置为 false),攻击者将 ...

  7. 每天一道面试题LeetCode 01 -- 两数之和

    Two Sum 两数之和 Given an array of integers, find two numbers such that they add up to a specific target ...

  8. Day003 +和字符串使用的问题

    先看一段代码 int a=10; int b=20; System.out.println(""+a+b); System.out.println(a+b+"" ...

  9. 基于RRCF（robust random cut forest）的时间序列异常检测流程

    摘要:RRCF是亚马逊提出的一个流式异常检测算法,是对孤立森林的改进,可对时序或非时序数据进行异常检测.本文是我从事AIOps研发工作时所做的基于RRCF的时序异常检测方案. 1.      数据格式 ...

  10. 腾讯云原生混合云-第三方集群弹EKS应对突发流量的利器

    作者 何鹏飞,腾讯云专家产品经理,曾作为容器私有云.TKEStack的产品经理兼架构师,参与腾讯云内部业务.外部客户容器化改造方案设计,目前负责云原生混合云产品方案设计工作. 胡晓亮,腾讯云专家工程师 ...