webpack多页运用架构系列（六）：据说webpack连图片和字体也能打包？

本文首发于
Array_Huang的手艺博客——
有用至上，非经作者赞同，请勿转载。

原文地点：
https://segmentfault.com/a/1190000006907701

假如您对本系列文章感兴趣，迎接关注定阅这里：
https://segmentfault.com/blog/array_huang

媒介

上一篇《据说webpack连less/css也能打包？》说到运用loader来加载CSS，这一篇来讲讲怎样笼统地加载别的范例的资本。为何强调是“笼统”呢？这是因为本文引见的要领并不针对任何范例的资本，这意味着，什么范例的资本都能用，但结果也都只是有限的。

用的什么loader呢？

本文引见俩loader：file-loader和url-loader。

file-loader

file-loader的主要功能是：把源文件迁徙到指定的目次（能够简朴理解为从源文件目次迁徙到build目次），并返回新文件的途径（简朴拼接而成）。

file-loader须要传入name参数，该参数接收以下变量（以下议论的条件是：源文件src/public-resource/imgs/login-bg.jpg;在根目次内实行webpack敕令，也就是当前的上下文环境与src目次同级）：

• [ext]：文件的后缀名，示例为&＃8217;jpg&＃8217;。
• [name]：文件名自身，示例为&＃8217;login-bg&＃8217;。
• [path]：相对于当前实行webpack敕令的目次的相对途径（不含文件名自身），示例为&＃8217;src/public-resource/imgs/&＃8217;。这个参数我觉得用途不大，除非你想把迁徙后的文件放回源文件的目次或其子目次里。
• [hash]：源文件内容的hash，用于缓存处理计划。

我的做法是，require('!file-loader?name=static/images/[name].[ext]!../imgs/login-bg.jpg')，如许login-bg.jpg的途径就变成static/images/login-bg.jpg了，注重这还不是完全的途径，终究照样要拼上webpack设置中的output.publicPath参数的；比方说我的output.publicPath参数是../../../../build/，那末终究从require()里取得的完全途径就会是../../../../build/static/images/login-bg.jpg了。

url-loader

url-loader的主要功能是：将源文件转换成DataUrl(声明文件mimetype的base64编码)。据我所知，在前端领域里，图片和字体文件的DataUrl都是能够被浏览器所辨认的，因而能够把图片和字体都转化成DataUrl收纳在HTML/CSS/JS文件里，以削减HTTP连接数。

url-loader主要接收以下参数：

• limit参数，数据范例为整型，示意目的文件的体积大于若干字节就换用file-loader来处置惩罚了，不填则永久不会交给file-loader处置惩罚。比方require("url?limit=10000!./file.png");，示意假如目的文件大于10000字节，就交给file-loader处置惩罚了。
• mimetype参数，前面说了，DataUrl是须要声明文件的mimetype的，因而我们能够经由过程这个参数来强行设置mimetype，不填写的话则默许从目的文件的后缀名举行推断。比方require("url?mimetype=image/png!./file.jpg");，强行把jpg当png使哈。
• 统统file-loader的参数，这些参数会在启用file-loader时传参给file-loader，比方最主要的name参数。

实操演示

接下来照样用我的脚手架项目webpack-seed来引见怎样运用url-loader和file-loader来加载种种资本。

图片

这一块我是直接在webpack设置文件里设置的：

{
// 图片加载器，雷同file-loader，更适合图片，能够将较小的图片转成base64，削减http要求
// 以下设置，将小于8192byte的图片转成base64码
test: /\.(png|jpg|gif)$/,
loader: 'url-loader?limit=8192&name=./static/img/[hash].[ext]',
},

因为运用了[hash]，因而即便是差别页面援用了雷同名字但现实内容差别的图片，也不会形成“掩盖”的状况涌现；进一步讲，假如差别页面援用了在差别位置但现实内容雷同的图片，这还能够归并成一张图片，轻易浏览器缓存呢。

字体文件

这一块我也照样直接在webpack设置里设置的：

{
// 专供iconfont计划运用的，背面会带一串时刻戳，须要迥殊婚配到
test: /\.(woff|woff2|svg|eot|ttf)\??.*$/,
loader: 'file?name=./static/fonts/[name].[ext]',
},

须要声明的是，因为我运用的是阿里妈妈的iconfont计划，此计划加载字体文件的体式格局有一点点特别，所以正则婚配的时刻要注重一点，iconfont的CSS是如许的，你们看看就邃晓了：

@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1473142795'); /* IE9*/
src: url('iconfont.eot?t=1473142795#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff?t=1473142795') format('woff'), /* chrome, firefox */
url('iconfont.ttf?t=1473142795') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg?t=1473142795#iconfont') format('svg'); /* iOS 4.1- */
}

别的资本

或许你会问，我们为何还须要转移别的资本呢？直接援用不就能够了吗？

我之前也是这么做的，直接援用源文件目次src里的资本，比方说webuploader用到的swf文件，比方说用来兼容IE而又不须要打包的js文件。然则厥后我发明，如许做的话，就致使布置上线的时刻要把build目次和src目次同时放上去了；而且因为build目次和src目次同级，我就只能用build目次和src目次的上一级目次作为网站的根目次了（因为假如把build目次设为网站，用户就读取不到src目次了），横竖就是种种的不轻易。

那末，我是怎样做的呢？

我建了一个config文件，名为build-file.config.js，内容以下：

module.exports = {
js: {
xdomain: require('!file-loader?name=static/js/[name].[ext]!../../../vendor/ie-fix/xdomain.all.js'),
html5shiv: require('!file-loader?name=static/js/[name].[ext]!../../../vendor/ie-fix/html5shiv.min.js'),
respond: require('!file-loader?name=static/js/[name].[ext]!../../../vendor/ie-fix/respond.min.js'),
},
images: {
'login-bg': require('!file-loader?name=static/images/[name].[ext]!../imgs/login-bg.jpg'),
},
};

这个config文件起到两个作用：

1. 每次加载到这个config文件的时刻，会实行那些require()语句，对目的文件举行转移（从src目次到build目次）。
2. 挪用目的文件的代码段，能够从这个config文件掏出目的文件转移后的完全途径，比方我在src/public-resource/components/header/html.ejs里是这么用的：

恩，你可能会猎奇这HTML里怎样能直接援用js的值，哈哈哈，超纲了超纲了，这是我背面要讲到的内容了。

示例代码

诸位看本系列文章，搭配我在Github上的脚手架项目食用更佳哦（笑）：Array-Huang/webpack-seed(https://github.com/Array-Huang/webpack-seed)。

附系列文章目次（同步更新）

• webpack多页运用架构系列（一）：一步一步处理架构痛点：https://segmentfault.com/a/1190000006843916
• webpack多页运用架构系列（二）：webpack设置经常使用部份有哪些？:https://segmentfault.com/a/1190000006863968
• webpack多页运用架构系列（三）：怎样打包大众代码才防止反复？：https://segmentfault.com/a/1190000006871991
• webpack多页运用架构系列（四）：老式jQuery插件还不能丢，怎样兼容？:https://segmentfault.com/a/1190000006887523
• webpack多页运用架构系列（五）：据说webpack连less/css也能打包？:https://segmentfault.com/a/1190000006897458
• webpack多页运用架构系列（六）：据说webpack连图片和字体也能打包？:https://segmentfault.com/a/1190000006907701
• webpack多页运用架构系列（七）：开辟环境、临盆环境傻傻分不清楚？:https://segmentfault.com/a/1190000006952432
• webpack多页运用架构系列（八）：锻练我要写ES6！webpack怎样整合Babel？:https://segmentfault.com/a/1190000006992218
• webpack多页运用架构系列（九）：总有刁民想害朕！ESLint为你阻击渣滓代码:https://segmentfault.com/a/1190000007030775
• webpack多页运用架构系列（十）：怎样打造一个自定义的bootstrap:https://segmentfault.com/a/1190000007043716
• webpack多页运用架构系列（十一）：预打包Dll，完成webpack音速编译:https://segmentfault.com/a/1190000007104372
• webpack多页运用架构系列（十二）：运用webpack天生HTML一般网页&页面模板:https://segmentfault.com/a/1190000007126268
• webpack多页运用架构系列（十三）：构建一个简朴的模板规划体系:https://segmentfault.com/a/1190000007159115
• webpack多页运用架构系列（十四）：No复制粘贴！多项目共用基础设施
• webpack多页运用架构系列（十五）：论前端怎样在后端衬着开辟形式下夹缝生计
• webpack多页运用架构系列（十六）：善用浏览器缓存，该去则去，该留则留

本文首发于
Array_Huang的手艺博客——
有用至上，非经作者赞同，请勿转载。

原文地点：
https://segmentfault.com/a/1190000006907701

假如您对本系列文章感兴趣，迎接关注定阅这里：
https://segmentfault.com/blog/array_huang