編寫一個webpack loader，用於獲取指定目錄下的圖片，返回圖片URL數組

前言

常常遇到這麼一個問題。h5項目須要作圖片資源預加載的狀況，咱們每每須要手動的拿到一個個圖片地址存在數組裏面，而後再對其遍歷作預加載處理，好比這樣：

let imgList = ['http://domain.com/img/1.jpg','http://domain.com/img/2.jpg','http://domain.com/img/3.jpg',...];

本着能偷懶就偷懶的心態，咱們能夠編寫一個webpack loader來處理，而後給咱們返回以上所述那樣一個數組。

預期在頁面上這樣調用，獲取項目目錄下的img文件夾的圖片，給返回一個URL數組。

let imgList = __getPath('img');

原理

代碼量不多，其實原理也比較簡單，使用正則匹配__getPath('img')得到圖片所在的文件夾名稱，而後拿到圖片的相對路徑，require，再將其拼接字符返回，如：

[require("img/1.jpg"),require("img/2.jpg"),require("img/3.jpg"),...]

最終return的content會被執行，而後就返回了一個圖片URL數組。

const fs = require("fs")
const path = require('path');
const glob = require('glob');
const loaderUtils = require('loader-utils');

module.exports = function (content) {
    const options = loaderUtils.getOptions(this) || {}; 
    if(options.noCache)this.cacheable(false);
    
    let fileReg = /__getPath\(([^\)]+)\)/gim;
    //自定義文件 context|| 從webpack 4開始，原先的this.options.context被改進爲this.rootContext
    let rootPath = options.context || this.rootContext || (this.options && this.options.context);
    let srcPath = path.join(rootPath, "/src");
    let filepath = this.context; //被處理的文件所在路徑
    content = content.replace(fileReg, (ret, src) => {
        let pathName = src.replace(/'|"/g, "");
        let resList = glob.sync(path.join(srcPath, pathName) + "/*");
        let result = '[';
        for (let i = 0; i < resList.length; i++) {
            let respath = path.relative(filepath, resList[i]).replace(/\\/g, "/")
            result += "require('" + respath + "')" + ","
        }
        result = result.substr(0,result.length-1) + "]";
        return result;
       
    })
    return content;
}

安裝和使用

我將其命名爲imgurl-loader發佈到npm上了。

npm install --save-dev imgurl-loader

webpack配置

...
  module: {
    rules: [
     {
        test: /\.js$/, 
        include:/src/,
        use: [{
          loader:'imgurl-loader',
          options:{
            noCache:false, //可選，是否使用緩存，默認是使用緩存
            context:path.resolve(__dirname,src) //可選，獲取src的絕對路徑 
          }
        }]
      },
      //圖片處理
    {
        test: /\.(png|jpg|jpeg|gif|svg)$/,
        use: [{
            loader: 'file-loader',
            options: {
                outputPath: 'img',
                name: '[name]_[contenthash:8].[ext]'
            }
        }]
    }
    ],
  },

源碼: https://github.com/xiaojiecong/imgurl-loader
Demo: https://github.com/xiaojiecong/imgurl-loader-demo

（若是能夠幫到你們，能夠star一下o(￣︶￣)o）