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 相关文章推荐
javascript 对表格的行和列都能加亮显示
Dec 26 Javascript
JS去除字符串的空格增强版(可以去除中间的空格)
Aug 26 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
Apr 08 Javascript
jquery attr方法获取input的checked属性问题
May 26 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
Jun 17 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
Jun 08 Javascript
js实现可旋转的立方体模型
Oct 16 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
May 13 Javascript
vue spa应用中的路由缓存问题与解决方案
May 31 Javascript
layer弹出层自定义提交取消按钮的例子
Sep 10 Javascript
vue打包npm run build时候界面报错的解决
Aug 13 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
使用PHPMYADMIN操作mysql数据库添加新用户和数据库的方法
2010/04/02 PHP
PHP中使用strpos函数实现屏蔽敏感关键字功能
2014/08/21 PHP
Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法详解
2016/07/20 PHP
JavaScript的Function详细
2006/11/14 Javascript
JavaScript中的事件处理
2008/01/16 Javascript
jQuery 学习6 操纵元素显示效果的函数
2010/02/07 Javascript
jQuery的初始化与对象构建之浅析
2011/04/12 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
2013/03/14 Javascript
Js 时间函数getYear()的使用问题探讨
2013/04/01 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
2014/02/12 Javascript
AngularJS+Node.js实现在线聊天室
2015/08/28 Javascript
JS深度拷贝Object Array实例分析
2016/03/31 Javascript
javascript url几种编码方式详解
2016/06/06 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
2017/01/04 Javascript
javascript操作cookie
2017/01/17 Javascript
JavaScript实现瀑布流以及加载效果
2017/02/11 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
2018/10/16 Javascript
微信小程序新手教程之启动页的重要性
2019/03/03 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
2019/07/26 Javascript
python实现字符串连接的三种方法及其效率、适用场景详解
2017/01/13 Python
python装饰器-限制函数调用次数的方法(10s调用一次)
2018/04/21 Python
Python基于百度云文字识别API
2018/12/13 Python
python实现画循环圆
2019/11/23 Python
python如何控制进程或者线程的个数
2020/10/16 Python
SVG实现多彩圆环倒计时效果的示例代码
2017/11/21 HTML / CSS
Sperry官网:帆船鞋创始品牌
2016/09/07 全球购物
《挑山工》的教学反思
2014/02/16 职场文书
二年级班级文化建设方案
2014/05/10 职场文书
党的群众路线剖析材料
2014/10/09 职场文书
婚前保证书范文
2015/02/28 职场文书
2015年财务工作总结范文
2015/03/31 职场文书
早上好问候语大全
2015/11/10 职场文书
2016党员三严三实心得体会
2016/01/15 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书
MySQL 亿级数据导入导出及迁移笔记
2021/06/18 MySQL