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. jpa 联合查询方法

    public interface TaskBaseline { String getNumber(); String getTitle(); String getName(); String getP ...

  2. ORACLE跨数据库查询的方法

    原文地址:http://blog.csdn.net/huzhenwei/article/details/2533869 本文简述了通过创建database link实现Oracle跨数据库查询的方法 ...

  3. kernel笔记——块I/O

    Linux下,I/O处理的层次可分为4层: 1. 系统调用层,应用程序使用系统调用指定读写哪个文件,文件偏移是多少  2. 文件系统层,写文件时将用户态中的buffer拷贝到内核态下,并由cache缓 ...

  4. [LeetCode] 9. 回文数

    题目链接:https://leetcode-cn.com/problems/palindrome-number/ 题目描述: 判断一个整数是否是回文数.回文数是指正序(从左向右)和倒序(从右向左)读都 ...

  5. leetcode 224. Basic Calculator 、227. Basic Calculator II

    这种题都要设置一个符号位的变量 224. Basic Calculator 设置数值和符号两个变量,遇到左括号将数值和符号加进栈中 class Solution { public: int calcu ...

  6. 抽象类练习（Job和TestJob）

    package com.Summer_0427.cn; /** * @author Summer * 根据抽象类完成以下题目 * 某软件公司对程序员的工作有一个总体的规定, * 不同的类型的程序员可以 ...

  7. ORM相关操作

    1.一般操作 <1> all(): 查询所有结果 <2> filter(**kwargs): 它包含了与所给筛选条件相匹配的对象 <3> get(**kwargs) ...

  8. 如何卸载VS 2017之前版本比如VS 2013、VS2015、 VS vNext？

    前言 大学专业为软件工程,进入大学之后才知道这个专业需要用到笔记本,我的笔记本配置为I3,内存4个G,已经有大几年了,中间坏了修了一次一直用到现在,这个笔记本还是我哥打工过年回来身上仅有的三四千块钱所 ...

  9. c#, AOP动态代理实现动态权限控制（一）

    因最近工作需要一个动态的权限配置功能,具体实现逻辑是c#的动态代理功能,废话不多说,直接干货.需求: 用户分为管理员.普通用户 不同用户拥有不同功能权限 用户的权限可配置 新增功能时,不用修改权限配置 ...

  10. 软工+C(7): 野生程序员

    // 上一篇:最近发展区/脚手架 // 下一篇:提问和回复 怎样做足够好的软件?我们就差一个程序员! 没有什么软件工程的理论的时候,程序员们凭借自己对编程的热爱,凭借着:"这是一个可以自动化 ...