摘要：修改配置文件匹配的文件名，這里匹配后綴為的，只要了該文件名結(jié)尾的文件，都將使用這個(gè)來(lái)處理命中后使用的加載器查看結(jié)果，和之前一致，推薦使用配置文件形式，可以保持引入文件格式的一致性。有利于維護(hù)和美觀更多配置，可以查閱關(guān)于部分。

上一章講的是DLL加速編譯，這一章開(kāi)始講loader相關(guān)的部分，但是關(guān)于plugin的部分善未完結(jié)，因?yàn)榧磳⒁v的ExtractTextWebpackPlugin用到了一些loader，所以覺(jué)得先講一下loder比較好。

我比較喜歡裝載器這個(gè)翻譯，loder說(shuō)白了就是對(duì)各種文件的轉(zhuǎn)化而已，比如json-loader可以將loader文件中的內(nèi)容轉(zhuǎn)化為js對(duì)象，也就是可以模擬為讀取json文件然后做JSAON.parse而已，而對(duì)于其他的裝載器則也類似，是對(duì)不同文件的不同處理方式，只是他們保持了相同的接口形式。就像一個(gè)加工的機(jī)器，有一個(gè)入口和一個(gè)出口，入口放豬肉，出來(lái)豬肉制品，入口放雞肉，出來(lái)雞肉制品，里面如何實(shí)現(xiàn)或許不一樣，但是操作方式基本一致。

初始化項(xiàng)目

$ mkdir 0x009-loader
$ cd 0x009-loader
$ npm init -y
$ cnpm install --save-dev webpack raw-loader

添加配置

const path              = require("path");

module.exports = {
    entry  : {
        "index": ["./src/index.js"],
    },
    output : {
        path    : path.join(__dirname, "dist"),
        filename: "[name].bundle.js"
    }
};

添加示例文件

// ./srcindex.txt
hello loader

// ./src/index.j
var content = require("raw-loader!./index.txt")
console.log(content)

打包并查看結(jié)果

$ webpack
// ./dist/index.js
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {

var content = __webpack_require__(2)

console.log(content)


/***/ }),
/* 2 */
/***/ (function(module, exports) {

module.exports = "hello loader"

/***/ })
/******/ ]);

可以看到，文件的內(nèi)容被以一個(gè)模塊的形式導(dǎo)出，而在引入的文件中，變得不再是引入一個(gè)文件，而是一個(gè)模塊。

不在require中使用loader，因?yàn)槁闊┣也幻烙^，我們可以把它遷移到webpack.conf.js中。

修改配置文件

// ./wenpack.conf.js
const path = require("path");

module.exports = {
    entry : {
        "index": ["./src/index.js"],
    },
    output: {
        path    : path.join(__dirname, "dist"),
        filename: "[name].bundle.js"
    },
    module: {
        rules: [
            {
                test: /.txt$/,
                use : "raw-loader"
            }
        ]
    }
};

test：匹配的文件名，這里匹配后綴為.txt的，只要require了該文件名結(jié)尾的文件，都將使用這個(gè)raw-loader來(lái)處理

use：命中后使用的加載器

查看結(jié)果，和之前一致，推薦使用wenpack配置文件形式，可以保持引入文件格式的一致性。有利于維護(hù)和美觀

更多配置，可以查閱webpack關(guān)于raw-loader部分。

安裝依賴

$ cnpm install --save-dev json-loader

添加rule配置

{
    test: /.json$/,
    use : loader : "json-loader"
}

引用

//./src/index.json
{
  "name": "張三",
  "age": "21"
}
// ./src/index.js
require("./index.json")

打包并查看結(jié)果

/* 1 */
/***/ (function(module, exports, __webpack_require__) {

__webpack_require__(2)

/***/ }),
/* 2 */
/***/ (function(module, exports) {

module.exports = {"name":"張三","age":"21"}

/***/ })
/******/ ]);

可見(jiàn)，json-loder將文件內(nèi)的json字符串轉(zhuǎn)化成了js對(duì)象，相當(dāng)于使用raw-loader獲取文件內(nèi)容字符串，再調(diào)用JSON.parse，然后封裝成模塊并導(dǎo)出。

安裝依賴包

$ cnpm install --save-dev file-loader

添加rule配置

{
            test: /.(png|jpg|gif)$/,
            use : [
                {
                    loader : "file-loader",
                    options: {}
                }
            ]
        }

引用

// ./src/index.js
var funny = require("./../res/funny.png")

打包并查看結(jié)果

$ ls ./dist
4e4e36593ce458606ffd851043749eec.png
index.bundle.js

/* 1 */
/***/ (function(module, exports, __webpack_require__) {

// var content = require("raw-loader!./index.txt")
// var content = require("./index.txt")

var funny = __webpack_require__(2)


/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {

module.exports = __webpack_require__.p + "4e4e36593ce458606ffd851043749eec.png";

/***/ })
/******/ ]);

可以看出，文件被導(dǎo)出到了dist，并且將文件的路徑封裝成了模塊并導(dǎo)出。

option其他配置

name：名字

[path]：文件路徑

[name]：文件名稱

[hash]：文件hash

[ext]：文件后綴

以上變量可以隨機(jī)組合，形成文件名,推薦：[name].[hash].[ext]

注意：每引入一個(gè)文件，就會(huì)生成一個(gè)模塊，即便該文件只是文件名不同，但是內(nèi)容相同

更多配置，可以查閱webpack關(guān)于file-loader部分。

刪除file-loader，添加配置

{

            test: /.(png|jpg|gif)$/,
            use : [
                {
                    loader : "url-loader",
                    options: {
                        limit   : 1048576, // 低于1m， 這里的單位是Byte
                        mimetype: "image/jpg", // 類型是`jpg`
                        name    : "[name].[hash].[ext]",
                        fallback: "file-loader" //否則使用`file-loader`
                    }
                }
            ]
        }
```

引入一張高于1048576的jpg圖片和1張低于81920的jpg圖片，還有一張png圖片，da

// 低于1048576
require("./../res/icon.jpg")
// 高于1048576
require("./../res/big.jpg")

打包并查看結(jié)果

// ./dist
big.f22f26599897a8f5003aea3d070135bf.jpg
index.bundle.js

// ./index.bundle.js

/***/ }),
/* 2 */
/***/ (function(module, exports) {

module.exports = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAcFBQYFBAcGBgYIBwcICx...
tDEx6snNS15Z9DcRe9a1n/AMew+tZI/qK1rP8A49h9a1p7Es//2Q=="

/***/ }),
/* 3 */
/***/ (function(module, exports, __webpack_require__) {

module.exports = __webpack_require__.p + "big.f22f26599897a8f5003aea3d070135bf.jpg";

/***/ })
/******/ ]);

可以看出大于1m的那個(gè)圖片文件被以文件的形式導(dǎo)出，而小于1m的文件被以dataurl的形式封裝成模塊

參數(shù)說(shuō)明

limit：限制文件大小，如果小于這個(gè)數(shù)，則轉(zhuǎn)化成DATAURL，如果大于這個(gè)數(shù)，則使用fallback指定的loader再次裝載，如果沒(méi)有配置fallback，則默認(rèn)調(diào)用file-loader

mimetype：這個(gè)只是用來(lái)指定文件的mimetype，因?yàn)橛行┪募](méi)有后綴，或者后綴和文件不符合。

fallback：文件超出limit之后的加載器

注意：url-loader自身只有這3個(gè)參數(shù)，但是如果超出limit大小，將會(huì)執(zhí)行下一個(gè)loader并且自動(dòng)將配置的參數(shù)往下傳，所以文中的案例的name其實(shí)是file-loader的參數(shù)，其他loader的參數(shù)同理也可以往下傳

注意：這里的use其實(shí)還有另外一種querystring寫(xiě)法，不過(guò)不推薦

{
        test: /.(png|jpg|gif)$/,
        use:"url-loader?limit=1045876&name=[name].[hash].[ext]"
    }

更多配置，可以查閱webpack關(guān)于url-loader部分。

源代碼