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. ...
随机推荐
- 转载-C++ vector 用法
转自:http://www.cnblogs.com/wang7/archive/2012/04/27/2474138.html 在c++中,vector是一个十分有用的容器,下面对这个容器做一下总结. ...
- LoadRunner脚本增强技巧之手动关联
个人认为LoadRunner的手动关联技巧可以看做参数化的一种,区别在与获取参数的来源不同. 一般的参数化:把脚本中一个写死的数值或者字符串用一个变量参数来代替,每次迭代的时候,从本地文件或者数据库中 ...
- 第208天:jQuery框架封装(一)
一.事件框架 1.DOM2 --事件流 事件流 :冒泡 捕获 1.1冒泡:事件按照从最特定的事件目标到最不特定的事件目标(document对象或者body)的顺序触发. 1.1.1浏览器兼容问题处理 ...
- 【bzoj4007】[JLOI2015]战争调度 暴力+树形背包dp
题目描述 给你一棵 $n$ 层的完全二叉树,每个节点可以染黑白两种颜色.对于每个叶子节点及其某个祖先节点,如果它们均为黑色则有一个贡献值,如果均为白色则有另一个贡献值.要求黑色的叶子节点数目不超过 $ ...
- MySQL复制 -- Binlog (1)
复制之所以工作得益于MySQL把对数据库的变更都记录在 binlog中,然后主库把它读出来,放到从库上去应用.当然binlog 的用途不仅限于此,比如 PITR等 在5.1.4版本以前,binlog格 ...
- UVA - 11997(巧妙的优先队列)
题意: 有k个整数数组,各包含k个元素,在每个数组中取一个元素加起来,可以得到kk个和,求这些和中最小的k个值 解析: 从简单的情况开始分析:经典方法,对原题没有思路,那么分析问题的简化版 这是对于两 ...
- svn和git的区别及适用场景
svn和git的区别及适用场景 来源 https://blog.csdn.net/wz947324/article/details/80104621 svn的优势: 优异的跨平台支持,对windows ...
- React Native工程中TSLint静态检查工具的探索之路
建立的代码规范没人遵守,项目中遍地风格迥异的代码,你会不会抓狂? 通过测试用例的程序还会出现Bug,而原因仅仅是自己犯下的低级错误,你会不会抓狂? 某种代码写法存在问题导致崩溃时,只能全工程检查代码, ...
- 【JQuery】数据
一.前言 接着前一章的内容,继续本章的学习 二.内容 queue 显示或操作在匹配元素上执行的函数队列 .queue(queueName) 操作在匹配元素上执行的函数队列 .queue( ...
- java规范(三)-----判空----方法内的为空判断
一般我们判空或者有判断条件时 都是使用 if(条件成立){ 执行代码 } 这样的逻辑. 但是如果对象的字段很深层次时或者条件很多时就容易形成很多个{}的情况,这样就容易分不出哪个花括号属于哪部分.如下 ...