【Webpack】publicPath

embedded/2024/10/19 7:29:34/

Webpack 中的 publicPath 主要用来指定生产文件的公共 URL 前缀。

它可以是一个绝对路径(如 CDN 网址)或相对路径,当 Webpack 生成的文件在 HTML 文件中引用时,会加上这个前缀,来指明文件的具体位置。如果没有设置 publicPath,在引用文件时就会使用相对路径,可能导致一些路径错误。

Webpack 的 publicPath 可以在多个场景中发挥作用,以下是几个具体的使用场景:

1)输出文件的路径配置 我们在配置 Webpack 的 output 时,可以用到 publicPath,例如:

output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist'),publicPath: '/'
}

在上面的配置中,所有动态加载或者打包好的资源都会以 '/' 作为公共路径。

2)开发环境中的热更新路径 在使用 Webpack Dev Server 时,publicPath 可以用于设定热更新的路径,使得资源能够正确的加载。

devServer: {publicPath: '/dist/'
}

这个配置告诉开发服务器在内存中提供编译后的文件时应将它们放在 /dist/ 路径下。

3)动态导入 (Dynamic Import) 当你使用动态导入语法 ( import() ) 时,也会用到 publicPath。如果你希望在生产环境中通过 CDN 加载这些资源,你会这样配置:

output: {publicPath: 'https://cdn.example.com/assets/'
}

这样一来,动态导入的文件就会从指定的 CDN 地址加载。

4)图片和字体等静态资源的引用 如果项目中有很多静态资源(如图片、字体等),这些资源也可以通过设置 publicPath 来指定其路径。Webpack 会在处理这些资源时,自动加上指定的公共路径前缀,使得资源引用更加简便和一致。

5)利用环境变量 我们还可以利用环境变量来动态设置 publicPath,例如在开发和生产环境中使用不同的路径前缀:

const ENV = process.env.NODE_ENV;
const publicPath = ENV === 'production' ? 'https://cdn.example.com/assets/' : '/';module.exports = {output: {publicPath: publicPath}
}

http://www.ppmy.cn/embedded/120048.html

相关文章

矿石运输船数据集、散货船数据集、普通货船数据集、集装箱船数据集、渔船数据集以及客船数据集

海船:用于船只检测的大规模精准标注数据集 我们很高兴地介绍一个新的大规模数据集——海船,该数据集专为训练和评估船只目标检测算法而设计。目前,这个数据集包含31,455张图像,并涵盖了六种常见的船只类型,包括矿石运…

Linux工具的使用——yum和vim的理解和使用

目录 linux工具的使用1.linux软件包管理器yum1.1yum的背景了解关于yum的拓展 1.2yum的使用 2.Linux编辑器-vim使用2.1vim的基本概念2.2vim的基本操作2.3命令模式命令集2.3.1关于光标的命令:2.3.2关于复制粘贴的命令2.3.3关于删除的命令2.3.4关于文本编辑的命令 2.4插…

嵌入式单片机底层原理详解

前言 此笔记面向有C语言基础、学习过数字电路、对单片机有一定了解且尚在学习阶段的群体编写,笔记中会介绍单片机的结构、工作原理,以及一些C语言编程技巧,对于还停留在复制模板、copy代码阶段的读者会有比较大的帮助,待学习完成后可以独立完成几乎所有单片机的驱动开发。 …

实例展示Spring的作用以及如何使用

Spring 是一个广泛应用于 Java 开发的开源框架,它主要有以下几个重要作用: 一、依赖注入(Dependency Injection) 作用: 解耦组件之间的依赖关系,使得代码更易于维护和测试。比如在一个 Web 应用中&#xff…

ElasticSearch安装分词器与整合SpringBoot

ElasticSearch安装分词器与整合SpringBoot 如果还没安装的点击安装ElasticSearch查看怎么安装 分词器 1.分词器 在Elasticsearch中,分词器(Tokenizer)是分析器(Analyzer)的一部分,它的主要职责是将文本输入…

华为OD机试 - 积木最远距离(Python/JS/C/C++ 2024 E卷 100分)

华为OD机试 2024E卷题库疯狂收录中,刷题点这里 专栏导读 本专栏收录于《华为OD机试真题(Python/JS/C/C)》。 刷的越多,抽中的概率越大,私信哪吒,备注华为OD,加入华为OD刷题交流群,…

【SpringCloud】01-远程调用

1. RestTemplate 注册Bean SpringBootApplication public class CartServiceApplication {public static void main(String[] args) {SpringApplication.run(CartServiceApplication.class, args);System.out.println("cart启动成功");}Beanpublic RestTemplate re…

蜘蛛爬虫的ip来自机房,用户的爬虫来自于哪里

用户的爬虫可以来自多个不同的地方,具体取决于用户的配置和环境。以下是一些常见的来源: 1. 个人计算机 本地运行:许多用户可能会在自己的个人电脑上运行爬虫脚本,直接通过本地网络连接互联网。这种情况下,爬虫的 IP…