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

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

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

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

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

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

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

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

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

[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的主要功能是：將源文件轉換成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文件起到兩個作用：

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

調用目標文件的代碼段，可以從這個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