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

更新时间：2019年05月18日 13:45:17 作者：小李子的一天

这篇文章主要介绍了webpack中如何加载静态文件的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

前言:

对于非静态的文件，如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实现全屏页面滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10
深入理解js promise chain
下面小编就为大家带来一篇深入理解js promise chain。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05
JavaScript实现向OL列表内动态添加LI元素的方法
这篇文章主要介绍了JavaScript实现向OL列表内动态添加LI元素的方法,实例分析了javascript操作html元素的技巧,需要的朋友可以参考下
2015-03-03
聊一聊JS中的prototype
function定义的对象有一个prototype属性，prototype属性又指向了一个prototype对象，注意prototype属性与prototype对象是两个不同的东西，要注意区别.这篇文章主要介绍了JS中的prototype的相关资料,需要的朋友可以参考下
2016-09-09
javascript完美拖拽的实现方法
这篇文章介绍了javascript完美拖拽的实现方法，有需要的朋友可以参考一下
2013-09-09
微信小程序制作扭蛋机代码实例
这篇文章主要介绍了微信小程序制作扭蛋机代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-09-09
详解ES9的新特性之异步遍历Async iteration
在ES6中，引入了同步iteration的概念，随着ES8中的Async操作符的引用，是不是可以在一异步操作中进行遍历操作呢？今天要给大家讲一讲ES9中的异步遍历的新特性Async iteration。
2021-06-06
js实现基于正则表达式的轻量提示插件
这篇文章主要介绍了基于正则表达式的轻量提示插件，兼容性强却文件轻巧的文本框检测插件,推荐给大家，有需要的小伙伴可以参考下。
2015-08-08
JS Replace 全部替换字符的用法小结
本篇文章主要是对JS Replace 全部替换字符的用法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2013-12-12
js针对图片加载失败的处理方法分析
这篇文章主要介绍了js针对图片加载失败的处理方法,结合实例形式分析了js针对图片加载失败时的事件监听、响应等相关操作技巧,需要的朋友可以参考下
2019-08-08