如何使 webpack 更喜欢带有扩展名的文件？

Question

我有两个文件：

- somefile.scss
- somefile.scss.ts

在源代码中，文件是这样使用的（来自打字稿文件）：

import styles from "somefile.scss"

打字稿正常工作并导入正确的文件（.scss.ts），但 webpack 选择了错误的文件（.scss）

我怎样才能让 webpack 更喜欢 .scss.ts 文件而不是 .scss （假设两者都存在于同一目录中，我无法更改名称或目录）？

我已尝试修改解析（未成功）：

// not working
resolve: {
  extensions: [".scss.ts", ".ts"]
}

// also not working
resolve: {
  extensions: ["*", ".ts"]
}

Answer 1

我认为最易读和最清晰的方法就是使用全名导入文件：

import styles from "somefile.scss.ts"

这样您就不必猜测将要导入哪个，并且如果有人稍后更改resolve webpack 配置，则构建很可能不会受到影响。

如果你真的想把它放在resolve.extenstions 选项上，你应该写成：

    ...
    resolve: {
        // the last `...` is optional in case you want 
        // to keep the default webpack extension resolution
        extensions: [".ts", "", "..."]
    }
    ...