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. 【Springboot】Springboot自动装配原理

    1.核心注解就是 EnableAutoConfiguration  该注解会激活SpringBoot的自动装配功能: 代码如下: @Target(ElementType.TYPE) @Retentio ...

  2. hdu4756 最小树+树形dp

    题意:       给你一个完全图,让你在上面找到一颗最小树,然后问破坏这个最小树的某一条边后用其他边连接(要求最小)成新的树,然后输出破坏每一条边后最小树中最大的那个. 思路:       先跑出一 ...

  3. 逆向工程第004篇：跨越CM4验证机制的鸿沟（中）

    一.前言 在上一篇文章的最后,我已经找出了关键的CALL语句,那么这篇文章我就带领大家来一步一步地分析这个CALL.我会将我的思路完整地展现给大家,因此分析过程可能略显冗长,我会分为两篇文章进行讨论. ...

  4. LA3708墓地雕塑

    题意:       有N个墓碑,等距离的分布在一个圆形墓地的周围,然后又要添加m个墓碑,最后要求所有的墓碑还是等距离,添加的墓碑可以放在任意位置,问之前的N个墓碑的最少移动距离之和是多少? 思路:   ...

  5. PAT 乙级 -- 1008 -- 数组元素循环右移问题

    题目简述 一个数组A中存有N(N>0)个整数,在不允许使用另外数组的前提下,将每个整数循环向右移M(M>=0)个位置,即将A中的数据由(A0 A1--AN-1)变换为(AN-M -- AN ...

  6. PowerShell-6.文件操作

    1.显示文本内容 Get-Content "°C:\\Program Files (x86)\\PsUpdate\\b.dat" 2.得到b.dat文件内容,然后把里面的所有'C' ...

  7. Jetbrains系列产品License key is in legacy format

    原文链接: https://zhile.io/2018/08/25/jetbrains-license-server-crack.html

  8. C++中使用sort对常见容器排序

    本文主要解决以下问题 STL中sort的使用方法 使用sort对vector的排序 使用sort对map排序 使用sort对list排序 STL中sort的使用方法 C++ STL 标准库中的 sor ...

  9. 测试报告$\beta$

    VisualPytorch beta发布了! 功能概述:通过可视化拖拽网络层方式搭建模型,可选择不同数据集.损失函数.优化器生成可运行pytorch代码 扩展功能:1. 模型搭建支持模块的嵌套:2. ...

  10. 企业更需要定制化CRM系统满足个性化需求

    随着市场的发展和信息技术的进步,越来越多的企业购买CRM客户关系管理系统来帮助管理.提高效率.但哪怕处在相同行业的企业,他们对于CRM的功能需求都会有着很大的不同.因此,大部分企业都开始进行个性化定制 ...