webpack中如何加载静态文件的方法步骤


Posted in Javascript onMay 18, 2019

前言:

对于非静态的文件,如js,当webpack打包时,会被直接打到模块文件中,如main.js,如果修改了,需要再次编译
而对于静态文件,如jpg,svg等,我们不希望webpack去打包,只需要在build完后,直接放到dist下的某个路径下即可,随时可以修改,并不需要再次编译

首先,看一段很熟悉的webpack配置

{
  test: [/\.jpg/],
  loader: require.resolve('url-loader'),
  options: {
    limit: 10000,
    name: 'static/media/[name].[ext]',
  },
}

它表明,在解析jpg文件时,只需要提供一个url即可,bytes小于10000的转为base64。 此url为static/media/xxx.jpg。
注意:此处的url已经不是 项目文件夹结构的那个url(如src/assets/image/xxx.jpg), 而是 static/media/xxx.jpg,当编译后,dist/static/media中会出现 xxx.jpg

那么我们如何在组件中引入静态资源呢?

有两张方式:

1、在组件最上方,使用import导入

import b from "@/assets/image/a.jpg"
//此时 b 的值为 static/media/a.jpg

在组件中

<img src={b}/>

2、使用require导入

如果不在组件上方使用import导入,而是在组件中的任意位置使用时,可通过require引入

<img src={require("@/assets/image/a.jpg")}>
//此时require("@/assets/image/a.jpg")的值就是static/media/a.jpg

那么同理,如果想让markdown等其他文件,也成为静态资源。

第一步:

{
  test: [/\.md/],
  loader: require.resolve('url-loader'),
  options: {
    limit: 10, //可以设置小点
    name: 'static/media/[name].[ext]',
  },
}

第二步:

//md文件和jpg不同,我们需要的最终是md文件的内容,不是url
axios.get(require("@/assets/image/map.md")).then(res=>{
  //res.data 就是内容
})

然后部署上去后,如果后期我们需要对map.md做修改,则直接修改static/media/map.md文件就行了,直接生效,不需要再次编译

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jqTransform form表单美化插件使用方法
Jul 05 Javascript
JavaScript中的稀疏数组与密集数组[译]
Sep 17 Javascript
JS图片预加载 JS实现图片预加载应用
Dec 03 Javascript
js实现简单选项卡与自动切换效果的方法
Apr 10 Javascript
JavaScript 动态加载脚本和样式的方法
Apr 13 Javascript
分享12个实用的jQuery代码片段
Mar 09 Javascript
Iscrool下拉刷新功能实现方法(推荐)
Jun 26 Javascript
在vue里使用codemirror遇到的问题
Nov 01 Javascript
微信公众平台获取access_token的方法步骤
Mar 29 Javascript
element-ui中按需引入的实现
Dec 25 Javascript
js模拟实现烟花特效
Mar 10 Javascript
Vue+tracking.js 实现前端人脸检测功能
Apr 16 Javascript
微信小程序实现录音时的麦克风动画效果实例
May 18 #Javascript
vue+egg+jwt实现登录验证的示例代码
May 18 #Javascript
egg.js的基本使用和调用数据库的方法示例
May 18 #Javascript
inquirer.js一个用户与命令行交互的工具详解
May 18 #Javascript
webpack 代码分离优化快速指北
May 18 #Javascript
如何实现小程序tab栏下划线动画效果
May 18 #Javascript
微信小程序结合Storage实现搜索历史效果
May 18 #Javascript
You might like
PHP 开源框架22个简单简介
2009/08/24 PHP
PHP static局部静态变量和全局静态变量总结
2014/03/02 PHP
laravel5创建service provider和facade的方法详解
2016/07/26 PHP
PHP实现接收二进制流转换成图片的方法
2017/01/10 PHP
Yii框架使用PHPExcel导出Excel文件的方法分析【改进版】
2019/07/24 PHP
DEFER怎么用?
2006/07/01 Javascript
有一段有意思的代码-javascript现实多行信息
2007/08/26 Javascript
firefox事件处理之自动查找event的函数(用于onclick=foo())
2010/08/05 Javascript
js中各浏览器中鼠标按键值的差异
2011/04/07 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2012/01/21 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
2013/10/20 Javascript
IE8中动态创建script标签onload无效的解决方法
2014/12/22 Javascript
jquery实现相册一下滑动两次的方法
2015/02/09 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
2015/04/06 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
详解Weex基于Vue2.0开发模板搭建
2017/03/20 Javascript
Vue2.0使用过程常见的一些问题总结学习
2017/04/10 Javascript
webpack3+React 的配置全解
2017/08/21 Javascript
Mint UI 基于 Vue.js 移动端组件库
2017/11/07 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
2018/05/12 Javascript
jQuery 导航自动跟随滚动的实现代码
2018/05/30 jQuery
微信小程序:数据存储、传值、取值详解
2019/05/07 Javascript
[01:35]2018完美盛典章节片——共竞
2018/12/17 DOTA
Python中函数的参数定义和可变参数用法实例分析
2015/06/04 Python
Python使用arrow库优雅地处理时间数据详解
2017/10/10 Python
Python使用cx_Oracle模块操作Oracle数据库详解
2018/05/07 Python
Python内存读写操作示例
2018/07/18 Python
python多进程使用及线程池的使用方法代码详解
2018/10/24 Python
瑞典在互联网上最大的宠物商店:Animail
2020/10/31 全球购物
制药工程专业个人求职自荐信
2014/01/25 职场文书
2014年财务部工作总结
2014/11/11 职场文书
2015年仓库管理员工作总结
2015/04/21 职场文书
合理缓解职场压力,让你随时保持最佳状态!
2019/06/21 职场文书
历史名人教你十五个读书方法,赶快Get起来!
2019/07/18 职场文书
Python import模块的缓存问题解决方案
2021/06/02 Python
VS2019连接MySQL数据库的过程及常见问题总结
2021/11/27 MySQL