webpack output.publicPath
output.publicPath
string
function
对于按需加载(on-demand-load)或加载外部资源(external resources)(如图片、文件等)来说,output.publicPath 是很重要的选项。如果指定了一个错误的值,则在加载这些资源时会收到 404 错误。
此选项指定在浏览器中所引用的「此输出目录对应的公开 URL」。相对 URL(relative URL) 会被相对于 HTML 页面(或 <base>
标签)解析。相对于服务的 URL(Server-relative URL),相对于协议的 URL(protocol-relative URL) 或绝对 URL(absolute URL) 也可是可能用到的,或者有时必须用到,例如:当将资源托管到 CDN 时。
该选项的值是以 runtime(运行时) 或 loader(载入时) 所创建的每个 URL 为前缀。因此,在多数情况下,此选项的值都会以/
结束。
默认值是一个空字符串 ""
。
简单规则如下:output.path
中的 URL 以 HTML 页面为基准。
path: path.resolve(__dirname, "public/assets"),
publicPath: "https://cdn.example.com/assets/"
对于这个配置:
publicPath: "/assets/",
chunkFilename: "[id].chunk.js"
对于一个 chunk 请求,看起来像这样 /assets/4.chunk.js
。
对于一个输出 HTML 的 loader 可能会像这样输出:
<link href="/assets/spinner.gif" />
或者在加载 CSS 的一个图片时:
background-image: url(/assets/spinner.gif);
webpack-dev-server 也会默认从 publicPath
为基准,使用它来决定在哪个目录下启用服务,来访问 webpack 输出的文件。
注意,参数中的 [hash]
将会被替换为编译过程(compilation) 的 hash。详细信息请查看指南 - 缓存。
示例:
publicPath: "https://cdn.example.com/assets/", // CDN(总是 HTTPS 协议)
publicPath: "//cdn.example.com/assets/", // CDN (协议相同)
publicPath: "/assets/", // 相对于服务(server-relative)
publicPath: "assets/", // 相对于 HTML 页面
publicPath: "../assets/", // 相对于 HTML 页面
publicPath: "", // 相对于 HTML 页面(目录相同)
在编译时(compile time)无法知道输出文件的 publicPath
的情况下,可以留空,然后在入口文件(entry file)处使用自由变量(free variable) __webpack_public_path__
,以便在运行时(runtime)进行动态设置。
__webpack_public_path__ = myRuntimePublicPath
// 应用程序入口的其他部分
有关 __webpack_public_path__
的更多信息,请查看此讨论。
webpack output.publicPath的更多相关文章
- webpack output的path publicPath
path是用来定义入口文件保存的地址,而publicPath是定义非入口文件需要抽离保存的第三方文件的保存地址 vue-cli 中HtmlWebpackPlugin生成html,都会存在path路径上 ...
- Webpack中publicPath设置
webpack中的path是当我们build的时候,输出项目打包文件的位置. webpack中的publicPath是我们打算放到web服务器下的目录,如果我们要放到网站的根目录下,那么就无需设置.如 ...
- webpack 配置 publicPath的理解
在学习webpack的时候,配置文件中有一个publicPath属性,一直不是很明白它到底是怎么用,也查了很多资料,得到最多的说法是当打包的时候,webpack会在静态文件路径前面添加publicPa ...
- webpack生成的css文件background-image url图片无法加载
之前在使用webpack3构建基于less预处理的项目时,在对指定的元素使用background-image: url(xxx)来设置背景图片时,本地开发是ok的,但是在项目编译产出后背景图片就找不到 ...
- 详解react/redux的服务端渲染:页面性能与SEO
亟待解决的疑问 为什么服务端渲染首屏渲染快?(对比客户端首屏渲染) react客户端渲染的一大痛点就是首屏渲染速度慢问题,因为react是一个单页面应用,大多数的资源需要在首次渲染前就加载 ...
- 【redux】详解react/redux的服务端渲染:页面性能与SEO
亟待解决的疑问 为什么服务端渲染首屏渲染快?(对比客户端首屏渲染) react客户端渲染的一大痛点就是首屏渲染速度慢问题,因为react是一个单页面应用,大多数的资源需要在首次渲染前就加载 ...
- Configuration Reference In Vue CLI 3.0
Configuration Reference This project is sponsored by #Global CLI Config Some global configurations ...
- vue-cli2、vue-cli3脚手架详细讲解
前言: vue脚手架指的是vue-cli它是vue官方提供的一个快速构建单页面(SPA)环境配置的工具,cli 就是(command-line-interface ) 命令行界面 .vue-cli是 ...
- webpack学习笔记--配置output
Output output 配置如何输出最终想要的代码. output 是一个 object ,里面包含一系列配置项,下面分别介绍它们. filename output.filename 配置 ...
随机推荐
- Ubuntu 16.04 修改状态栏位置
修改状态栏位置: gsettings set com.canonical.Unity.Launcher launcher-position Bottom #底部(苹果风格) gsettings set ...
- 2019牛客暑期多校训练营(第七场)E F H I
E Find the median 题意:每次往序列中增加连续的[l,r]的数,每加入一次就询问当前序列的中位数. 解法:此题没有要求在线,那么直接离线+线段树+二分就可以了.求出每个端点之后排序得到 ...
- 力扣—climbing stairs(爬楼梯) python实现
题目描述: 中文: 假设你正在爬楼梯.需要 n 阶你才能到达楼顶. 每次你可以爬 1 或 2 个台阶.你有多少种不同的方法可以爬到楼顶呢? 注意:给定 n 是一个正整数. 英文: You are cl ...
- jquery-ui拖拽对齐线位置不对的操作
1,在draggable的drag中直接获取$(this).offset()来给对齐线设置top和left: 2,在draggable的drag中直接获取event的clientX去和event的of ...
- 双联通的tarjan算法
转自:https://www.zhihu.com/question/40746887/answer/88428236 连通分量有三种∶边双连通分量,点双连通分量,强连通分量,前两种属于无向图,后一种属 ...
- js 页面向下滚动
向下滚动一段距离 距离顶部距离 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; <scrip ...
- 记录 SpringBoot 踩坑经历
1.spring-boot-starter-web 作用 <dependency> <groupId>org.springframework.boot</groupId& ...
- Java中"String.equals()“和"=="的区别
Do NOT use the `==`` operator to test whether two strings are equal! It only determines whether or n ...
- setattr(object, name, value)¶
This is the counterpart of getattr(). The arguments are an object, a string and an arbitrary value. ...
- PHP filter_list() 函数
定义和用法 filter_list() 函数返回包含所有得到支持的过滤器的一个数组. 语法 filter_list() 提示和注释 注释:该函数的结果不是过滤器 ID,而是过滤器名称.请使用 filt ...