webpack多頁應(yīng)用架構(gòu)系列（六）：聽說webpack連圖片和字體也能打包？

dayday_up 發(fā)布于2019-08-21 14:26 / 1155人閱讀

摘要：本文首發(fā)于的技術(shù)博客實用至上，非經(jīng)作者同意，請勿轉(zhuǎn)載。原文地址如果您對本系列文章感興趣，歡迎關(guān)注訂閱這里前言上一篇聽說連也能打包說到使用來加載，這一篇來講講如何籠統(tǒng)地加載其它類型的資源。源文件內(nèi)容的，用于緩存解決方案。

本文首發(fā)于Array_Huang的技術(shù)博客——實用至上，非經(jīng)作者同意，請勿轉(zhuǎn)載。
原文地址：https://segmentfault.com/a/1190000006907701
如果您對本系列文章感興趣，歡迎關(guān)注訂閱這里：https://segmentfault.com/blog/array_huang

前言

上一篇《聽說webpack連less/css也能打包？》說到使用loader來加載CSS，這一篇來講講如何籠統(tǒng)地加載其它類型的資源。為什么強調(diào)是“籠統(tǒng)”呢？這是因為本文介紹的方法并不針對任何類型的資源，這意味著，什么類型的資源都能用，但效果也都只是有限的。

用的什么loader呢？

本文介紹倆loader：file-loader和url-loader。

file-loader

file-loader的主要功能是：把源文件遷移到指定的目錄（可以簡單理解為從源文件目錄遷移到build目錄），并返回新文件的路徑（簡單拼接而成）。

file-loader需要傳入name參數(shù)，該參數(shù)接受以下變量（以下討論的前提是：源文件src/public-resource/imgs/login-bg.jpg;在根目錄內(nèi)執(zhí)行webpack命令，也就是當(dāng)前的上下文環(huán)境與src目錄同級）：

[ext]：文件的后綴名，示例為"jpg"。

[name]：文件名本身，示例為"login-bg"。

[path]：相對于當(dāng)前執(zhí)行webpack命令的目錄的相對路徑（不含文件名本身），示例為"src/public-resource/imgs/"。這個參數(shù)我感覺用處不大，除非你想把遷移后的文件放回源文件的目錄或其子目錄里。

[hash]：源文件內(nèi)容的hash，用于緩存解決方案。

我的做法是，require("!file-loader?name=static/images/[name].[ext]!../imgs/login-bg.jpg")，這樣login-bg.jpg的路徑就變成static/images/login-bg.jpg了，注意這還不是完整的路徑，最終還是要拼上webpack配置中的output.publicPath參數(shù)的；比如說我的output.publicPath參數(shù)是../../../../build/，那么最終從require()里獲得的完整路徑就會是../../../../build/static/images/login-bg.jpg了。

url-loader

url-loader的主要功能是：將源文件轉(zhuǎn)換成DataUrl(聲明文件mimetype的base64編碼)。據(jù)我所知，在前端范疇里，圖片和字體文件的DataUrl都是可以被瀏覽器所識別的，因此可以把圖片和字體都轉(zhuǎn)化成DataUrl收納在HTML/CSS/JS文件里，以減少HTTP連接數(shù)。

url-loader主要接受以下參數(shù)：

limit參數(shù)，數(shù)據(jù)類型為整型，表示目標(biāo)文件的體積大于多少字節(jié)就換用file-loader來處理了，不填則永遠不會交給file-loader處理。例如require("url?limit=10000!./file.png");，表示如果目標(biāo)文件大于10000字節(jié)，就交給file-loader處理了。

mimetype參數(shù)，前面說了，DataUrl是需要聲明文件的mimetype的，因此我們可以通過這個參數(shù)來強行設(shè)置mimetype，不填寫的話則默認從目標(biāo)文件的后綴名進行判斷。例如require("url?mimetype=image/png!./file.jpg");，強行把jpg當(dāng)png使哈。

一切file-loader的參數(shù)，這些參數(shù)會在啟用file-loader時傳參給file-loader，比如最重要的name參數(shù)。

實操演示

接下來還是用我的腳手架項目webpack-seed來介紹如何利用url-loader和file-loader來加載各類資源。

圖片

這一塊我是直接在webpack配置文件里設(shè)置的：

        {
          // 圖片加載器，雷同file-loader，更適合圖片，可以將較小的圖片轉(zhuǎn)成base64，減少http請求
          // 如下配置，將小于8192byte的圖片轉(zhuǎn)成base64碼
          test: /.(png|jpg|gif)$/,
          loader: "url-loader?limit=8192&name=./static/img/[hash].[ext]",
        },

由于使用了[hash]，因此即便是不同頁面引用了相同名字但實際內(nèi)容不同的圖片，也不會造成“覆蓋”的情況出現(xiàn)；進一步講，如果不同頁面引用了在不同位置但實際內(nèi)容相同的圖片，這還可以歸并成一張圖片，方便瀏覽器緩存呢。

字體文件

這一塊我也還是直接在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- */
}

其它資源

也許你會問，我們?yōu)槭裁催€需要轉(zhuǎn)移其它資源呢？直接引用不就可以了嗎？

我之前也是這么做的，直接引用源文件目錄src里的資源，比如說webuploader用到的swf文件，比如說用來兼容IE而又不需要打包的js文件。但是后來我發(fā)現(xiàn)，這樣做的話，就導(dǎo)致部署上線的時候要把build目錄和src目錄同時放上去了；而且由于build目錄和src目錄同級，我就只能用build目錄和src目錄的上一級目錄作為網(wǎng)站的根目錄了（因為如果把build目錄設(shè)為網(wǎng)站，用戶就讀取不到src目錄了），反正就是各種的不方便。

那么，我是怎么做的呢？

我建了一個config文件，名為build-file.config.js，內(nèi)容如下：

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文件起到兩個作用：

每次加載到這個config文件的時候，會執(zhí)行那些require()語句，對目標(biāo)文件進行轉(zhuǎn)移（從src目錄到build目錄）。

調(diào)用目標(biāo)文件的代碼段，可以從這個config文件取出目標(biāo)文件轉(zhuǎn)移后的完整路徑，例如我在src/public-resource/components/header/html.ejs里是這么用的：




  
  
  <% if (pageTitle) { %> <%= pageTitle %> - <% } %> XXXX后臺

恩，你可能會好奇這HTML里怎么能直接引用js的值，哈哈哈，超綱了超綱了，這是我后面要講到的內(nèi)容了。

示例代碼

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

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

webpack多頁應(yīng)用架構(gòu)系列（一）：一步一步解決架構(gòu)痛點：https://segmentfault.com/a/1190000006843916

webpack多頁應(yīng)用架構(gòu)系列（二）：webpack配置常用部分有哪些？:https://segmentfault.com/a/1190000006863968

webpack多頁應(yīng)用架構(gòu)系列（三）：怎么打包公共代碼才能避免重復(fù)？：https://segmentfault.com/a/1190000006871991

webpack多頁應(yīng)用架構(gòu)系列（四）：老式j(luò)Query插件還不能丟，怎么兼容？:https://segmentfault.com/a/1190000006887523

webpack多頁應(yīng)用架構(gòu)系列（五）：聽說webpack連less/css也能打包？:https://segmentfault.com/a/1190000006897458

webpack多頁應(yīng)用架構(gòu)系列（六）：聽說webpack連圖片和字體也能打包？:https://segmentfault.com/a/1190000006907701

webpack多頁應(yīng)用架構(gòu)系列（七）：開發(fā)環(huán)境、生產(chǎn)環(huán)境傻傻分不清楚？:https://segmentfault.com/a/1190000006952432

webpack多頁應(yīng)用架構(gòu)系列（八）：教練我要寫ES6！webpack怎么整合Babel？:https://segmentfault.com/a/1190000006992218

webpack多頁應(yīng)用架構(gòu)系列（九）：總有刁民想害朕！ESLint為你阻擊垃圾代碼:https://segmentfault.com/a/1190000007030775

webpack多頁應(yīng)用架構(gòu)系列（十）：如何打造一個自定義的bootstrap:https://segmentfault.com/a/1190000007043716

webpack多頁應(yīng)用架構(gòu)系列（十一）：預(yù)打包Dll，實現(xiàn)webpack音速編譯:https://segmentfault.com/a/1190000007104372

webpack多頁應(yīng)用架構(gòu)系列（十二）：利用webpack生成HTML普通網(wǎng)頁&頁面模板:https://segmentfault.com/a/1190000007126268

webpack多頁應(yīng)用架構(gòu)系列（十三）：構(gòu)建一個簡單的模板布局系統(tǒng):https://segmentfault.com/a/1190000007159115

webpack多頁應(yīng)用架構(gòu)系列（十四）：No復(fù)制粘貼！多項目共用基礎(chǔ)設(shè)施

webpack多頁應(yīng)用架構(gòu)系列（十五）：論前端如何在后端渲染開發(fā)模式下夾縫生存

webpack多頁應(yīng)用架構(gòu)系列（十六）：善用瀏覽器緩存，該去則去，該留則留

本文首發(fā)于Array_Huang的技術(shù)博客——實用至上，非經(jīng)作者同意，請勿轉(zhuǎn)載。
原文地址：https://segmentfault.com/a/1190000006907701
如果您對本系列文章感興趣，歡迎關(guān)注訂閱這里：https://segmentfault.com/blog/array_huang

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/87899.html

發(fā)表評論

登陸后可評論

0條評論

dayday_up

男|高級講師

我要關(guān)注我要私信

TA的文章

畢業(yè)一年，從底薪2800中介轉(zhuǎn)行軟件測試工程師，輕松月薪14K

閱讀 1880·2021-11-11 16:55
前端每日實戰(zhàn)：58# 視頻演示如何用純 CSS 創(chuàng)作一只卡通鸚鵡

閱讀 783·2019-08-30 15:53
前端外包項目開發(fā)心得

閱讀 3616·2019-08-30 15:45
用CSS實現(xiàn)Tab頁切換效果

閱讀 771·2019-08-30 14:10
[譯]:BFC與IFC

閱讀 3296·2019-08-30 12:46
[面試專題]數(shù)據(jù)結(jié)構(gòu)和算法-JS之魂

閱讀 2155·2019-08-29 13:15
碼農(nóng)長壽指南

閱讀 2051·2019-08-26 13:48
《JavaScript高級程序設(shè)計》讀書筆記

閱讀 963·2019-08-26 12:23

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

webpack多頁應(yīng)用架構(gòu)系列（六）：聽說webpack連圖片和字體也能打包？

相關(guān)文章

webpack多頁應(yīng)用架構(gòu)系列（五）：聽說webpack連less/css也能打包？

webpack多頁應(yīng)用架構(gòu)系列（一）：一步一步解決架構(gòu)痛點

webpack多頁應(yīng)用架構(gòu)系列（十三）：構(gòu)建一個簡單的模板布局系統(tǒng)

webpack多頁應(yīng)用架構(gòu)系列（三）：怎么打包公共代碼才能避免重復(fù)？

webpack多頁應(yīng)用架構(gòu)系列（十一）：預(yù)打包Dll，實現(xiàn)webpack音速編譯

發(fā)表評論

0條評論

dayday_up

男|高級講師

TA的文章

畢業(yè)一年，從底薪2800中介轉(zhuǎn)行軟件測試工程師，輕松月薪14K

前端每日實戰(zhàn)：58# 視頻演示如何用純 CSS 創(chuàng)作一只卡通鸚鵡

前端外包項目開發(fā)心得

用CSS實現(xiàn)Tab頁切換效果

[譯]:BFC與IFC

[面試專題]數(shù)據(jù)結(jié)構(gòu)和算法-JS之魂

碼農(nóng)長壽指南

《JavaScript高級程序設(shè)計》讀書筆記

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

webpack多頁應(yīng)用架構(gòu)系列（六）：聽說webpack連圖片和字體也能打包？

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！