webpack中的静态资源处理
你可能已经注意到,在我们的项目结构里,有两个静态文件的路径,分别是:src/assets
和 static/
。那这两个到底有什么区别呢?
Webpacked 资源
为了回答这个问题,我们首先需要理解webpack是怎样处理静态资源的。在*.vue
组件中,所有的templates和css都会被vue-html-loader
和 css-loader
解析,寻找资源的URL。举个例子,在<img src="./logo.png">
和 background: url(./logo.png)
, "./logo.png"
中,都是相对资源路径,都会被Webpack解析成模块依赖 。
由于logo.png
不是JavaScript,当被看成一个模块依赖的时候,我们需要使用url-loader
和 file-loader
进行处理。 该模板已经配置好了这些loaders,所以你能够使用相对/模块路径时不需要担心部署的问题。 (This boilerplate has already configured these loaders for you, so you basically get features such as filename fingerprinting and conditional base64 inlining for free, while being able to use relative/module paths without worrying about deployment.)
由于这些资源可能在构建的时候被内联/复制/重命名, 所以它们从本质上来说是你源码的一部分。这就是为什么我们建议将交由webpack处理的静态资源和其它源文件一样放在/src
路径下面。实际上,你甚至不需要把它们全都放在/src/assets
路径下:你可以基于模块/组件的使用来组织文件结构。例如,你可以把每个组件和属于它的静态资源放在它自己的目录下。
资源处理规则
相对URL, e.g.
./assets/logo.png
将会被解释成一个模块依赖。它们会被一个基于你的Webpack输出配置自动生成的URL替代。没有前缀的URL, e.g.
assets/logo.png
将会被看成相对URL,并且转换成./assets/logo.png
前缀带
~
的URL 会被当成模块请求, 类似于require('some-module/image.png')
. 如果你想要利用Webpack的模块处理配置,就可以使用这个前缀。例如,如果你有一个对于assets
的路径解析,你需要使用<img src="~assets/logo.png">
来确保解析是对应上的。相对根目录的URL, e.g.
/assets/logo.png
是不会被处理的.
在JavaScript里获取资源路径
为了能让Webpack返回正确的资源路径,你需要使用require('./relative/path/to/file.jpg')
,由file-loader
进行解析,然后返回处理过的URL。例如:
computed: {
background () {
return require('./bgs/' + this.id + '.jpg')
}
}
"真实的" 静态资源
作为对比,在static/
下的文件都不会被Webpack处理:它们使用相同的文件名,直接拷贝到最终的路径。你必须使用绝对路径来引用这些文件,取决于在config.js
里面加入的build.assetsPublicPath
和 build.assetsSubDirectory
。
举个例子,下面的默认值是:
注意上面的例子,在最终的构建时将会包含./bgs/
路径下的所有图片 这是因为Webpack不能猜出来在运行时会用到其中的哪个,所以会包含所有的。
// config/index.js
module.exports = {
// ...
build: {
assetsPublicPath: '/',
assetsSubDirectory: 'static'
}
}
所有放在 static/
目录下的文件都应该是使用绝对URL/static/[filename]
引用的。如果你将assetSubDirectory
的值改成assets
, 那么这些URL就会被变成 /assets/[filename]
webpack中的静态资源处理的更多相关文章
- vue-cli 中的静态资源处理
你会注意到在项目结构上我们有静态资源两个目录:src/assets 和 static/.它们之间有什么区别? 1. 通过webpack处理的资源 要回答这个问题,我们首先需要了解webpack如何处理 ...
- Spring MVC程序中得到静态资源文件css,js,图片文件的路径问题总结
上一篇 | 下一篇 Spring MVC程序中得到静态资源文件css,js,图片 文件的路径 问题总结 作者:轻舞肥羊 日期:2012-11-26 http://www.blogjava.net/fi ...
- Spring Boot 中的静态资源到底要放在哪里?
当我们使用 SpringMVC 框架时,静态资源会被拦截,需要添加额外配置,之前老有小伙伴在微信上问松哥Spring Boot 中的静态资源加载问题:"松哥,我的HTML页面好像没有样式?& ...
- 在Salesforce中使用静态资源
静态资源 静态资源是Salesforce中默认的一种数据类型,用户可以上传各种文件,比如zip文件.jpg文件.css文件.图像文件等. 在Visualforce页面.Lightning框架的开发过程 ...
- SpringBoot使用thymeleaf的方式引用static中的静态资源
当我们在开发网站时为了快速完成,避免不了使用第三方的框架文件.这样我们就得引用框架中的各种资源文件.那么,在springboot中通过 thymeleaf如何在html中使用static文件夹下的静态 ...
- idea中springboot静态资源及页面跳转问题
1,静态资源放在resources/static下,html页面放在resources/templates下 2,在html中引入静态资源时,不用带static(对于路径来说是透明的) 3, 配置ht ...
- Spring Boot中的静态资源文件
Spring Boot中的静态资源文件 1.SSM中的配置 2.Spring Boot 中的配置 2.1 整体规划 2.2 源码解读 2.3 自定义配置 2.3.1 application.prope ...
- Spring MVC中处理静态资源的多种方法
处理静态资源,我想这可能是框架搭建完成之后Web开发的”头等大事“了. 因为一个网站的显示肯定会依赖各种资源:脚本.图片等,那么问题来了,如何在页面中请求这些静态资源呢? 还记得Spring MVC中 ...
- Django 模板中引用静态资源(js,css等)
Django 模板中免不了要用到一些js和CSS文件,查了很多网页,被弄得略晕乎,还是官网靠谱,给个链接大家可以自己看英文的. https://docs.djangoproject.com/en/1. ...
随机推荐
- Java多线程 -join用法
阿里面试官问我这个问题,我仔细总结了一下: 参考:sleep.yield.wait.join的区别(阿里面试) 1. join()介绍 join() 定义在Thread.java中.join() 的作 ...
- javascript+html5+css3下拉刷新 数据效果
文章摘自:suchso.com/projecteactual/javascript-html5-css3-taobao-xiala-data.html segmentfault.com/a/11900 ...
- BZOJ4923 K小值查询(splay)
容易想到建一棵平衡树,修改时打上标记即可.但是修改会导致平衡树结构被破坏.注意到实际上只有[k+1,2k)这一部分数在平衡树中的位置会被改变,所以对这一部分暴力修改,因为每次都会使其至少减小一半,复杂 ...
- DNA Sequence POJ - 2778 (ac自动机 + 快速幂)
题意: 给出患病的DNA序列,问序列长度为n的,且不包含患病的DNA序列有多少种 解析: 以给出的患病DNA序列建trie树 患病结点要用flag标记 对于长度为n的序列 位置i有四种 情况A C ...
- 【刷题】洛谷 P3807 【模板】卢卡斯定理
题目背景 这是一道模板题. 题目描述 给定\(n,m,p( 1\le n,m,p\le 10^5)\) 求 \(C_{n+m}^{m}\ mod\ p\) 保证 \(p\) 为prime \(C\) ...
- Java 工作2年后需要达到怎么样的技术水平
有人回答说这只能是大企业或者互联网企业的工程师才能拿到.也许是的,小公司或者非互联网企业拿两万的不太可能是码农了,应该是已经转管理后才有可能.还有区域问题,这个不在我的考虑范围内,因为除了北上广深杭, ...
- 【BZOJ1042】硬币购物(动态规划,容斥原理)
[BZOJ1042]硬币购物(动态规划,容斥原理) 题面 BZOJ Description 硬币购物一共有4种硬币.面值分别为c1,c2,c3,c4.某人去商店买东西,去了tot次.每次带di枚ci硬 ...
- 【arc080F】Prime Flip
Portal --> arc080_f Solution 这题的话..差分套路题(算吗?反正就是想到差分就很好想了qwq) (但是问题就是我不会这种套路啊qwq题解原话是:&quo ...
- shared_ptr & unique_ptr & weak_ptr (C++11)
c++11标准废除乐auto_ptr, C++ 标准库智能指针 使用这些智能指针作为将指针封装为纯旧 C++ 对象 (POCO) 的首选项. unique_ptr 只允许基础指针的一个所有者. 除非你 ...
- [DeeplearningAI笔记]卷积神经网络1.4-1.5Padding与卷积步长
4.1卷积神经网络 觉得有用的话,欢迎一起讨论相互学习~Follow Me 1.4Padding 一张\(6*6\)大小的图片,使用\(3*3\)的卷积核设定步长为1,经过卷积操作后得到一个\(4*4 ...