关于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老司机~~~。