webpack5之output和devServer的publicPath区别示例详解

目录
  • 一. output的publicPath
  • 二. devServer的publicPath

一. output的publicPath

我们知道output中的path的作用是打包后文件输出的目录：比如静态资源的js、css等输出，常见的会设置为dist、build文件夹等；

output中还有一个publicPath属性，该属性是指定index.html文件打包引用的一个基本路径：

  • 它的默认值是一个空字符串，所以我们打包后引入js文件时，路径是 bundle.js；

  • 在开发中，我们也将其设置为 / ，路径是 /bundle.js，那么浏览器会根据所在的域名+路径去请求对应的资源；
  • 如果我们希望打包后在本地直接打开html文件来运行，会将其设置为 ./，根据./bundle.js相对路径去查找资源；

举例：

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    // 打包后的文件的输出目录
    path: path.resolve(__dirname, "./build"),
    // 在打包之后的静态资源前面进行一个路径的拼接:
     publicPath: "./"
  },
  }

打包后：

二. devServer的publicPath

devServer中也有一个publicPath的属性，该属性是指定开发环境webpack serve下开启本地服务所在的文件夹：

  • 它的默认值是 /，也就是我们直接访问端口即可访问其中的资源 http://localhost:8080；
  • 如果我们将其设置为了 /abc,那么我们需要通过 http://localhost:8080/abc 才能访问到对应的打包后的资源；

举例：

module.exports = {
  // watch: true,
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    // 打包后的文件的输出目录
    path: path.resolve(__dirname, "./build"),
    // 在打包之后的静态资源前面进行一个路径的拼接
     publicPath: "/abc" //和下方publicPath设置一样
  },
  // 专门为webpack-dev-server
  // devServer为开发过程中, 开启一个本地服务
  devServer: {
    compress: true, //文件压缩启用 [gzip compression]
    publicPath: "/abc",
    }，
  }

官方提到： devServer.publicPath 与 output.publicPath相同

打包后：

注意：上方devServer设置/abc后，我们其中的bundle.js通过 http://localhost:8080/bundle.js是无法访问的,报错如下：

所以devServer.publicPath 与 output.publicPath设置要相同！

以上就是webpack5之output和devServer的publicPath区别示例详解的详细内容，更多关于webpack publicPath区别的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Webpack中publicPath路径问题详解

    Webpack中publicPath路径问题详解

    最近自己在搭建一个基于webpack的react项目,遇到关于output.publicPath和webpack-dev-server中publicPath的问题,而官方文档对它们的描述也不是很清楚,所以自己研究了下并写下本文记录. output output选项指定webpack输出的位置,其中比较重要的也是经常用到的有 path 和 publicPath output.path 默认值: process.cwd() output.path 只是指示输出的目录,对应一个 绝对路径 ,例如在项目

  • webpack学习教程之publicPath路径问题详解

    本文主要给大家介绍了关于webpack中publicPath路径问题的相关内容,分享出来供大家参考学习,下面来看看详细的介绍: output: { filename: "[name].js", path:path.resolve(__dirname,"build") } 如果没有指定pubicPath,则引入路径如下 <body> <script src="b.js"></script> </body&g

  • Webpack中publicPath使用详解

    Webpack中publicPath使用详解

    目录 output output.path output.publicPath webpack-dev-server中的publicPath html-webpack-plugin template filename 最后 斜杠/的含义 参考 最近自己在搭建一个基于webpack的react项目,遇到关于output.publicPath和webpack-dev-server中publicPath的问题,而官方文档对它们的描述也不是很清楚,所以自己研究了下并写下本文记录. output outp

  • Webpack path与publicPath的区别详解

    前言 在webpack模块化开发的过程中,发现webpack.config.js配置文件的输出路径总有一个path与publicPath,不解其意. module.exports = { output: { path: path.resolve("./examples/dist"), filename: "app.js", publicPath: "What should I put here?" } } 正文 官方解释 publicPath:

  • BeanFactory和FactoryBean的区别示例详解

    目录 正文 BeanFactory和FactoryBean的区别 1.BeanFactory 2.FactoryBean 正文 这个之前经常会遇到别人问 但是一直不是很能理解 工作开发中我对于bean的使用比较少 就是偶尔启动出错才会出现 可能是水平有限 但是bean 也是非常核心的问题 书到用时方恨少 且看且珍惜 BeanFacotry是spring中比较原始的Factory. 如XMLBeanFactory就是一种典型的BeanFactory.原始的BeanFactory无法支持spring

  • JavaScript箭头函数与普通函数的区别示例详解

    JavaScript箭头函数与普通函数的区别示例详解

    目录 箭头函数与普通函数的区别 箭头函数的理解 箭头函数里的this指向 总结 箭头函数与普通函数的区别 要讨论箭头函数和普通函数的区别,首先来看看两者的基本格式 普通函数和箭头共同点就是圆括号和大括号,圆括号里面一般放置参数,大括号一般放置函数主体,很明显箭头函数不需要写那么长,举个例子,有一个数组,使用map方法为数组的每个元素增加字符 let arr=['昨天','今天','明天'] let newarr=arr.map(function(item){ return item+='放假'

  • React元素与组件的区别示例详解

    目录 从问题出发 元素与组件 元素 组件 问题如何解决 自定义内容 第一种实现方式 第二种实现方式 第三种实现方式 从问题出发 我被问过这样一个问题: 想要实现一个 useTitle 方法,具体使用示例如下: function Header() { const [Title, changeTitle] = useTitle(); return ( <div onClick={() => changeTitle('new title')}> <Title /> </div

  • golang中make和new的区别示例详解

    前言 本文主要给大家介绍了关于golang中make和new区别的相关内容,分享出来供大家参考学习,话不多说了,来一起看看详细的介绍: new 和 make 都可以用来分配空间,初始化类型,但是它们确有不同. new(T) 返回的是 T 的指针 new(T) 为一个 T 类型新值分配空间并将此空间初始化为 T 的零值,返回的是新值的地址,也就是 T 类型的指针 *T,该指针指向 T 的新分配的零值. p1 := new(int) fmt.Printf("p1 --> %#v \n &quo

  • Mongoose中document与object的区别示例详解

    前言 本文主要给大家总结介绍了关于Mongoose中document与object区别的相关内容,分享出来供大家参考学习,其实这个问题其实是mongoose非常常见的问题,经常有很多以前没遇到这个问题的人都会被这个问题弄得怀疑人生. 我们先介绍一些问题的背景. 先看下面一段代码: router.get('/', function(req, res, next) { // res.render('index', { title: 'Express' }); const model = mongoo

  • python中is与双等于号“==”的区别示例详解

    前言 在开始本文之前,首先要知道Python中对象包含的三个基本要素,分别是:id(身份标识).python type()(数据类型)和value(值).is和==都是对对象进行比较判断作用的,但对对象比较判断的内容并不相同.下面来看看具体区别在哪. 发现问题 最近在给小伙伴写段小代码用于爬取一个GIS的各高层数据,python中使用了"is"来代替"==",结果下载至512的时候出了问题. 代码如下 def get_next(x, y, z): z += 1 if

  • vue.js中methods watch和computed的区别示例详解

    vue.js中methods watch和computed的区别示例详解

    目录 前言 介绍 一.作用机制上 二.从性质上 三.watch和computed的对比 四.methods不处理数据逻辑关系,只提供可调用的函数 五.从功能的互补上看待methods,watch和computed的关系 六.利用computed处理watch在特定情况下代码冗余的现象,简化代码 总结 computed watch 前言 这篇文章主要简述vue中的watch和computer区别,还有methods 首先,先说一下这几个不同在哪里,那当然是长得不一样啦~~~, 哈哈哈哈哈不开玩笑了

  • Java中class和Class的区别示例详解

    Java中class和Class的区别示例详解

    目录 一.class与Class区别 二.Class介绍 三.如何得到Class对象 1.通过getClass()方法获取到Class对象 2.通过forName()方法获取到Class对象 3.类.class获得Class对象(类字面常量) 四.Class常用方法 总结 一.class与Class区别 class是Java中的关键字,如public class Xxx 或者 class Xxx ,在声明Java类时使用. 而Class是一个类. 我们通常认为类是对象的抽象和集合,Class就相

  • PHP中isset、empty的用法与区别示例详解

    前言 在编写程序调用变量时,遇到未定义的变量时,会报错,这是就需要我们对变量先进行判断,再进行相关操作. 这里主要记录两个变量判断函数的使用:isset()与empty() 1.isset - 检测变量是否已设置并且非 NULL isset ( mixed $var [, mixed $... ] ) : bool 如果已经使用 unset() 释放了一个变量之后,它将不再是 isset(). 若使用 isset() 测试一个被设置成 NULL 的变量,将返回 FALSE. 同时要注意的是 nu

随机推荐