關於webpack中file-laoder的publicPath路徑問題

1、前言

配置webpack的時候，新手不免會遇到路徑問題，這裏寫一個昨天「研究」到凌晨2點，後來看loader源碼才發現的路徑問題😭

2、問題

在配置file-loader的時候，沒寫option.publicPath，最後發現文件竟然也能加載正確的加載路徑

3、描述

webpack官方文檔告訴咱們，若是publicPath不寫的話，默認爲_webpack_public_path_

publicPath

Type: String|Function Default: _webpack_public_path_

Specifies a custom public path for the target file(s).

意思就是默認爲：_webpack_public_path_

這裏簡單介紹一下_webpack_public_path_，這個變量等於output.publicPath

也就是說若是個人output.publicPath:'/'，則file-loader的option.publicPath也應該爲'/', 即加工以後的文件引用路徑直接爲根目錄，例如：

background-image: url("../imgs/react.png")

加工以後生成的引用路徑應該爲

background-image: url("/react.png")

但是結果卻爲

background-image: url("/imgs/react.png")

4、解決

徹底不合邏輯，做爲新手，我真的好懵😩，還覺得是哪裏配置又出問題了，最後在翻file-loader的源碼才發現問題所在

下面爲部分源碼

let publicPath = `__webpack_public_path__ + ${JSON.stringify(outputPath)}`
複製代碼

原來file-loader的option.publicPath默認值根部不是單單的__webpack_public_path__，其後還加上了option.outputPath【吐血😝】

這也就解釋了爲何不寫option.publicPath，加工以後也能生成正確的引用路徑

{
    test: /\.(png|jpe?g|gif)$/i, 
    loader: 'file-loader',
    options: {
        name:"[name].[ext]",
        outputPath:"imgs",
    }
}
複製代碼

5、結語

發現問題並最終找到答案。這說明我一開始的質疑是對的，也說明我不是循序漸進的按照文檔來寫，每一個步驟都走通了，爲之後進一步學習打好基礎。

另外，第一次看別人的源碼，感受好意外，代碼寫得好精簡（本覺得會很長，實際上就幾百行不到QAQ）。原本好緊張的，生怕太深奧看不懂，就像處男第一次看到赤裸裸的異性那樣🤓。只是暴露了幾個接口，代碼都封裝起來了。我之後必定會慢慢探索，爭取成爲code老司機~~~。