你可能已经注意到,在我们的项目结构里,有两个静态文件的路径,分别是: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中的静态资源处理的更多相关文章

  1. vue-cli 中的静态资源处理

    你会注意到在项目结构上我们有静态资源两个目录:src/assets 和 static/.它们之间有什么区别? 1. 通过webpack处理的资源 要回答这个问题,我们首先需要了解webpack如何处理 ...

  2. Spring MVC程序中得到静态资源文件css,js,图片文件的路径问题总结

    上一篇 | 下一篇 Spring MVC程序中得到静态资源文件css,js,图片 文件的路径 问题总结 作者:轻舞肥羊 日期:2012-11-26 http://www.blogjava.net/fi ...

  3. Spring Boot 中的静态资源到底要放在哪里?

    当我们使用 SpringMVC 框架时,静态资源会被拦截,需要添加额外配置,之前老有小伙伴在微信上问松哥Spring Boot 中的静态资源加载问题:"松哥,我的HTML页面好像没有样式?& ...

  4. 在Salesforce中使用静态资源

    静态资源 静态资源是Salesforce中默认的一种数据类型,用户可以上传各种文件,比如zip文件.jpg文件.css文件.图像文件等. 在Visualforce页面.Lightning框架的开发过程 ...

  5. SpringBoot使用thymeleaf的方式引用static中的静态资源

    当我们在开发网站时为了快速完成,避免不了使用第三方的框架文件.这样我们就得引用框架中的各种资源文件.那么,在springboot中通过 thymeleaf如何在html中使用static文件夹下的静态 ...

  6. idea中springboot静态资源及页面跳转问题

    1,静态资源放在resources/static下,html页面放在resources/templates下 2,在html中引入静态资源时,不用带static(对于路径来说是透明的) 3, 配置ht ...

  7. Spring Boot中的静态资源文件

    Spring Boot中的静态资源文件 1.SSM中的配置 2.Spring Boot 中的配置 2.1 整体规划 2.2 源码解读 2.3 自定义配置 2.3.1 application.prope ...

  8. Spring MVC中处理静态资源的多种方法

    处理静态资源,我想这可能是框架搭建完成之后Web开发的”头等大事“了. 因为一个网站的显示肯定会依赖各种资源:脚本.图片等,那么问题来了,如何在页面中请求这些静态资源呢? 还记得Spring MVC中 ...

  9. Django 模板中引用静态资源(js,css等)

    Django 模板中免不了要用到一些js和CSS文件,查了很多网页,被弄得略晕乎,还是官网靠谱,给个链接大家可以自己看英文的. https://docs.djangoproject.com/en/1. ...

随机推荐

  1. Java多线程 -join用法

    阿里面试官问我这个问题,我仔细总结了一下: 参考:sleep.yield.wait.join的区别(阿里面试) 1. join()介绍 join() 定义在Thread.java中.join() 的作 ...

  2. javascript+html5+css3下拉刷新 数据效果

    文章摘自:suchso.com/projecteactual/javascript-html5-css3-taobao-xiala-data.html segmentfault.com/a/11900 ...

  3. BZOJ4923 K小值查询(splay)

    容易想到建一棵平衡树,修改时打上标记即可.但是修改会导致平衡树结构被破坏.注意到实际上只有[k+1,2k)这一部分数在平衡树中的位置会被改变,所以对这一部分暴力修改,因为每次都会使其至少减小一半,复杂 ...

  4. DNA Sequence POJ - 2778 (ac自动机 + 快速幂)

    题意: 给出患病的DNA序列,问序列长度为n的,且不包含患病的DNA序列有多少种 解析: 以给出的患病DNA序列建trie树  患病结点要用flag标记 对于长度为n的序列 位置i有四种 情况A  C ...

  5. 【刷题】洛谷 P3807 【模板】卢卡斯定理

    题目背景 这是一道模板题. 题目描述 给定\(n,m,p( 1\le n,m,p\le 10^5)\) 求 \(C_{n+m}^{m}\ mod\ p\) 保证 \(p\) 为prime \(C\) ...

  6. Java 工作2年后需要达到怎么样的技术水平

    有人回答说这只能是大企业或者互联网企业的工程师才能拿到.也许是的,小公司或者非互联网企业拿两万的不太可能是码农了,应该是已经转管理后才有可能.还有区域问题,这个不在我的考虑范围内,因为除了北上广深杭, ...

  7. 【BZOJ1042】硬币购物(动态规划,容斥原理)

    [BZOJ1042]硬币购物(动态规划,容斥原理) 题面 BZOJ Description 硬币购物一共有4种硬币.面值分别为c1,c2,c3,c4.某人去商店买东西,去了tot次.每次带di枚ci硬 ...

  8. 【arc080F】Prime Flip

    Portal --> arc080_f Solution ​  这题的话..差分套路题(算吗?反正就是想到差分就很好想了qwq) ​​  (但是问题就是我不会这种套路啊qwq题解原话是:&quo ...

  9. shared_ptr & unique_ptr & weak_ptr (C++11)

    c++11标准废除乐auto_ptr, C++ 标准库智能指针 使用这些智能指针作为将指针封装为纯旧 C++ 对象 (POCO) 的首选项. unique_ptr 只允许基础指针的一个所有者. 除非你 ...

  10. [DeeplearningAI笔记]卷积神经网络1.4-1.5Padding与卷积步长

    4.1卷积神经网络 觉得有用的话,欢迎一起讨论相互学习~Follow Me 1.4Padding 一张\(6*6\)大小的图片,使用\(3*3\)的卷积核设定步长为1,经过卷积操作后得到一个\(4*4 ...