在 Webpack 中 resolve.extensions 做了什么？答案

【问题标题】：What does resolve.extensions do in Webpack?在 Webpack 中 resolve.extensions 做了什么？
【发布时间】：2016-11-12 17:03:21
【问题描述】：

这是关于 resolve.extensions 的 official document

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

【问题讨论】：

标签： webpack

【解决方案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 然后会继续查找这些路径中的每一个，直到找到一个文件。

【讨论】：