從零開始的webpack生活-0x009：FilesLoader裝載文件

0x001 概述

上一章講的是DLL加速編譯，這一章開始講loader相關的部分，可是關於plugin的部分善未完結，由於即將要講的ExtractTextWebpackPlugin用到了一些loader，因此以爲先講一下loder比較好。

0x002 loader介紹

我比較喜歡裝載器這個翻譯，loder說白了就是對各類文件的轉化而已，好比json-loader能夠將loader文件中的內容轉化爲js對象，也就是能夠模擬爲讀取json文件而後作JSAON.parse而已，而對於其餘的裝載器則也相似，是對不一樣文件的不一樣處理方式，只是他們保持了相同的接口形式。就像一個加工的機器，有一個入口和一個出口，入口放豬肉，出來豬肉製品，入口放雞肉，出來雞肉製品，裏面如何實現或許不同，可是操做方式基本一致。

0x003 栗子1-raw-loader：讀取文件，並封裝成模塊，導出惟一的內容爲文件內容的字符串

1. 初始化項目

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

2. 添加配置

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

3. 添加示例文件

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

4. 打包並查看結果

   $ 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"
   
   /***/ })
   /******/ ]);

   能夠看到，文件的內容被以一個模塊的形式導出，而在引入的文件中，變得再也不是引入一個文件，而是一個模塊。

5. 不在require中使用loader，由於麻煩且不美觀，咱們能夠把它遷移到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了該文件名結尾的文件，都將使用這個raw-loader來處理

     • use：命中後使用的加載器

   • 查看結果，和以前一致，推薦使用wenpack配置文件形式，能夠保持引入文件格式的一致性。有利於維護和美觀

6. 更多配置，能夠查閱webpack關於raw-loader部分。

0x004 栗子2-json-loader：將json文件轉化成js對象

1. 安裝依賴

$ cnpm install --save-dev json-loader

1. 添加rule配置

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

2. 引用

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

3. 打包並查看結果

   /* 1 */
   /***/ (function(module, exports, __webpack_require__) {
   
   __webpack_require__(2)
   
   /***/ }),
   /* 2 */
   /***/ (function(module, exports) {
   
   module.exports = {"name":"張三","age":"21"}
   
   /***/ })
   /******/ ]);

   可見，json-loder將文件內的json字符串轉化成了js對象，至關於使用raw-loader獲取文件內容字符串，再調用JSON.parse，而後封裝成模塊並導出。

0x005 栗子3-file-loader：導出文件並返回文件的URL

1. 安裝依賴包

$ cnpm install --save-dev file-loader

1. 添加rule配置

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

2. 引用

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

3. 打包並查看結果

   $ 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";
   
   /***/ })
   /******/ ]);

   能夠看出，文件被導出到了dist，而且將文件的路徑封裝成了模塊並導出。

4. option其餘配置

   • name：名字

     • [path]：文件路徑

     • [name]：文件名稱

     • [hash]：文件hash

     • [ext]：文件後綴

     • 以上變量能夠隨機組合，造成文件名,推薦：[name].[hash].[ext]

5. 注意：每引入一個文件，就會生成一個模塊，即使該文件只是文件名不一樣，可是內容相同

6. 更多配置，能夠查閱webpack關於file-loader部分。

0x006 栗子4-url-loader：根據文件大小類型判斷是否DATAURL

1. 刪除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`
                    }
                }
            ]
        }
```

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

   // 低於1048576
   require('./../res/icon.jpg')
   // 高於1048576
   require('./../res/big.jpg')

2. 打包並查看結果

   // ./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的那個圖片文件被以文件的形式導出，而小於1m的文件被以dataurl的形式封裝成模塊

3. 參數說明

   • limit：限制文件大小，若是小於這個數，則轉化成DATAURL，若是大於這個數，則使用fallback指定的loader再次裝載，若是沒有配置fallback，則默認調用file-loader

   • mimetype：這個只是用來指定文件的mimetype，由於有些文件沒有後綴，或者後綴和文件不符合。

   • fallback：文件超出limit以後的加載器

   • 注意：url-loader自身只有這3個參數，可是若是超出limit大小，將會執行下一個loader而且自動將配置的參數往下傳，因此文中的案例的name實際上是file-loader的參數，其餘loader的參數同理也能夠往下傳

   • 注意：這裏的use其實還有另一種querystring寫法，不過不推薦

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

4. 更多配置，能夠查閱webpack關於url-loader部分。

0x007. 資源

• 源代碼