关于 Webpack 中 file-laoder 的 publicPath 路径问题配置 Webpack 的时候，记录一

一、前言

配置 Webpack 的时候，记录一个昨天“研究”到凌晨 2 点，后来看 loader 源码才发现的路径问题😭

在配置 file-loader 的时候，没写option.publicPath，发现文件居然也能加载正确的加载路径。

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 的内部变量，等于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")

完全不合逻辑，作为新手，我真的好懵😩，还以为是哪里配置又出问题了，最后在翻 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",
    }
}

发现问题并最终找到答案。这说明我一开始的质疑是对的，也说明我不是按部就班的按照文档来写，每个步骤都走通了，为以后进一步学习打好基础。

另外，第一次看别人的源码，感觉好意外，代码写得好精简（本以为会很长，实际上就几百行不到 QAQ）。本来好紧张的，生怕太深奥看不懂。只是暴露了几个接口，代码都封装起来了。我以后一定会慢慢探索，争取成为 code 老司机~~~

已提交 PR 并合并，官方已经更新文档。