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

webpack学习笔记——publicPath路径问题的更多相关文章

  1. 【原】webpack学习笔记

    之前在react的项目中有用过webpack,不过没有认真的去研究,这段时间又重新好好的学习一下webpack,发觉 webpack是一个很强大的东西.而且很好用,方便,接下来主要是做一下学习的笔记 ...

  2. webpack学习笔记（二）-- 初学者常见问题及解决方法

    这篇文章是webpack学习第二篇,主要罗列了本人在实际操作中遇到的一些问题及其解决方法,仅供参考,欢迎提出不同意见. 注:本文假设读者已有webpack方面相关知识,故文中涉及到的专有名词不做另外解 ...

  3. 更博不能忘——webpack学习笔记

    webpack是前端构建系统就像grunt和gulp(之前有学习过grunt所以也就大概明白webpack是个什么东西),所以说前端技术大部分还真是相通的,现在觉得当时多看的东西并不白费,虽然长时间不 ...

  4. webpack学习笔记一：安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件

    一 .webpack学习环境准备: 1:window系统 2:安装node.js  官方网址 下载好后下一步下一步安装即可 安装步骤略过....... 3:nrm的安装 打开cmd命令控制台 输入:n ...

  5. Webpack学习笔记九 webpack优化总结

    webpack 优化笔记 webpack4 自带的优化包括 swingTree(摇摆树)和作用域提升 swingTree 比如入口文件 index.js引入通用方法 util, 里面有 10个方法, ...

  6. webpack学习笔记--配置entry

     Entry entry 是配置模块的入口,可抽象成输入,Webpack 执行构建的第一步将从入口开始搜寻及递归解析出所有入口依赖的模块. entry  配置是必填的,若不填则将导致 Webpack ...

  7. webpack学习笔记——打包后直接访问页面，图片路径错误

    我说的这种图片路径错误是这样的,运行webpack-dev-server,一切正常,没有错误.当webpack之后,直接打开index页面,报错,图片找不到,找不到的原因是路径错误. 先看我的项目代码 ...

  8. webpack学习笔记—webpack安装、基本配置

    文章结构: 什么是webpack? 安装webpack 'webpack基本配置 一.什么是webpack? 在学习react时发现大部分文章都是react和webpack结合使用的,所以在学reac ...

  9. webpack 学习笔记

    1.html-webpack-plugin 该插件主要作用是在release时,自动向index.html 文件中写入 <script>xx/xx/bundle.js</script ...

随机推荐

  1. 返回数组中指定的一列，将键值作为元素键名array_column

    array_column() 函数 从记录集中取出 last_name 列: <?php // 表示由数据库返回的可能记录集的数组 $a = array( array( 'id' => 5 ...

  2. [LeetCode] 16. 最接近的三数之和

    题目链接:https://leetcode-cn.com/problems/3sum-closest/ 题目描述: 给定一个包括 n 个整数的数组 nums 和 一个目标值 target.找出 num ...

  3. 随心测试_软测基础_002_<测试工程师_核心技能体系>

    测试工程师核心技能体系构成 测试基础体系:[对象——>方法——>流程].[测试活动类型——>质量] 测试分析体系:[测试对象分析]——>[测试设计(计划.数据.用例.文档)] ...

  4. xcode8 使用Instruments检测定位并解决iOS内存泄露

    https://www.jianshu.com/p/9bc7e65fc247 2017.07.27 17:24* 字数 628 阅读 1319评论 6喜欢 21 简介: 虽然苹果出了ARC(自动内存管 ...

  5. 国内可访问的稳定docker镜像

    可参考:https://yeasy.gitbooks.io/docker_practice/content/install/mirror.html 但在debian 9上进行相应配置后,在pull镜像 ...

  6. 其他综合-fdisk一键分区操作-无需脚本

    fdisk一键操作分区-无需脚本(根据自己的实际环境操作) 为了让在系统里能够显示新添加的硬盘已知有两种操作方法 : 1.重启 2.输入echo "- - -" > /sys ...

  7. CDH Yarn 调度资源指南 - CDH6.0.x 详解

    Yarn 工作架构 最近随着集群大家开始频繁使用集群,资源调度的问题越发的凸显出来.需要更加深入的了解 yarn 资源调度的原理,以及到底在背后做了一些什么事情. 来看一下下面这张图. yarn 里面 ...

  8. Python中的可视化神器：pyecharts

    pyecharts是一款将python与echarts结合的强大的数据可视化工具,本文将为你阐述pyecharts的使用细则 前言 我们都知道python上的一款可视化工具matplotlib,而前些 ...

  9. [模板] 区间mex && 区间元素种数

    区间mex 问题 给定序列\({a_i}\), 每次询问给出\(l\), \(r\), 询问 \(\text{mex} \{a_i\}, i \in \{l, l+1, \cdots r\}\) 解法 ...

  10. Element UI——本地引入iconfont不显示

    前言 前面因为本地引入Element UI导致了iconfont不显示,所以只好再去Element UI官网去扒下iconfot 步骤 进入官网 组件 | Element UI F12进入控制台,找到 ...