webpack中如何加载静态文件

hzx 发布于2019-08-26 13:49 / 1409人阅读

摘要：第一步可以设置小点第二步文件和不同，我们需要的最终是文件的内容，不是就是内容然后部署上去后，如果后期我们需要对做修改，则直接修改文件就行了，直接生效，不需要再次编译

前言:
对于非静态的文件，如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

在组件中

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


//此时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文件就行了，直接生效，不需要再次编译

云服务器 GPU云服务器 webpack按需加载线下cdn如何加速静态文件访问呢 h5如何加载js文件 js中如何读取文件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109619.html

Web前端性能优化——如何有效提升静态文件的加载速度

摘要：在减少文件请求数量方面大致有以下三方面合并脚本文件合并样式文件合并引用的图片，使用雪碧图。和的模块管理不同，前者是基于静态的，而后者是动态的。被打包文件的内容也已经被压缩混淆，减少了加载文件的。作者：刘轶斌，腾讯应用开发工程师商业转载请联系腾讯WeTest获得授权，非商业转载请注明出处。原文链接：http://wetest.qq.com/lab/view/345.html We...

ccj659 2019-08-06 13:25 评论0 收藏0
性能优化篇---Webpack构建代码质量压缩

摘要：运行构建带上可追踪到的工作只能正确的分析出如何剔除死代码，需要接入处理剔除配置见上开启即作用域提升在构建过程中，会借助模块化的静态特性，确定模块的依赖关系，将一个中的静态依赖提升到顶部。 Webpack构建速度优化基本优化完毕，接下来考虑的就是：线上代码质量的优化，即如何使用webpack构建出高质量的代码 Webpack构建流程：初始化配置参数 -> 绑定事件钩子回调 -> 确...

KunMinX 2019-08-23 16:22 评论0 收藏0
webpack多页应用架构系列（十六）：善用浏览器缓存，该去则去，该留则留

摘要：浏览器缓存简单介绍下面来简单介绍一下浏览器缓存，以及为何我要在标题中强调该去则去，该留则留。但后来我还是反转了自己，这种方法虽然能留下浏览器缓存，却做不到该去则去。本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/1190000010317802如果您对本系列文章感兴趣，欢迎关注订阅这里：h...

pekonchan 2019-08-06 13:24 评论0 收藏0