webpack - 在 Webpack 中 resolve.extensions 做了什么？

Question

这里是 official document关于 resolve.extensions

解决.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 的行为。请举例说明。

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 将继续查找这些路径中的每一个，直到找到一个文件。