在Webpack中，resolve.extensions是什么作用？

Question

这是关于resolve.extensions的官方文档

resolve.extensions

一个用于解析模块的扩展名数组。例如，为了发现CoffeeScript文件，你的数组应包含字符串".coffee"。

默认值：["", ".webpack.js", ".web.js", ".js"]

重要提示：设置此选项将覆盖默认值，这意味着webpack将不再尝试使用默认扩展名解析模块。如果您希望使用其扩展名（例如require('./somefile.ext')）要求的模块能够正确解析，则必须在数组中包含一个空字符串。同样，如果您希望没有扩展名（例如require('underscore')）要求的模块解析为具有“.js”扩展名的文件，则必须在数组中包含".js"。

我完全感到困惑。

"如果您希望使用其扩展名（例如require('./somefile.ext')）要求的模块能够正确解析，则必须在数组中包含一个空字符串。"

为什么？

"同样，如果您希望没有扩展名（例如require('underscore')）要求的模块解析为具有“.js”扩展名的文件，则必须在数组中包含".js"。"

为什么？如果我将".js"和".css"都包含在数组中会怎样？

我不清楚resolve.extension的行为。请用示例进行解释。

- Nicolas S.Xu

Answer 1

Webpack使用resolve.extensions来生成到模块的所有可能路径，例如：

function getPaths(module) {
    return ['', '.js', '.css'].map(ext => module + ext);
}

getPaths('./somefile'); // ['./somefile', './somefile.js', './somefile.css']

getPaths('./somefile.js'); // ['./somefile.js', './somefile.js.js', './somefile.js.css']

Webpack会依次查找这些路径，直到找到文件为止。

- Richard Scarrott