为什么某些未指定扩展的 webpack / Babel ES6 导入解析为“未定义”？

【问题标题】：Why do some webpack / Babel ES6 imports that don't specify an extension resolve as "undefined?"为什么某些未指定扩展的 webpack / Babel ES6 导入解析为“未定义”？
【发布时间】：2017-06-29 12:07:43
【问题描述】：

尽管没有触发 Webpack 或当我添加文件扩展名时，打字稿错误并正确解决。其他文件解析很好，有或没有扩展名。这是为什么呢？

虽然它通常发生在 React 组件中，但无论导入文件的内容如何，也不管它是否具有默认导出，它都可能发生。

【问题讨论】：

你使用的是 Webpack 1.x 还是 Webpack 2.x？
@AluanHaddad Webpack 1.x

标签： javascript typescript webpack ecmascript-6 babeljs

【解决方案1】：

这是因为这些文件在同一目录中有同名但扩展名不同的邻居（例如“.less”）。例如，我会将ComponentName.tsx 和ComponentName.less 放在同一个文件夹中。

两个可能的修复：

在 Webpack 配置 resolves 部分中，将 JS/ES6/TypeScript 扩展名移到 .less / .css 扩展名前面，例如从['.less', '.tsx', ...] 到['.tsx', '.less', ...]。这样，JavaScript 文件首先解析。
更好的是，不要将同名文件保存在同一目录中。

【讨论】：