Webpack忽略TypeScript Loader配置问题求助

嘿Daniel，我一眼就瞅出你配置里的关键问题了——这俩小错误直接让你的Loader规则完全没触发，难怪不管你换啥Loader、甚至删了tsconfig.json都没动静！

问题出在这两处： #

• 正则表达式写成字符串了：你把test和exclude的值用引号包成了字符串（比如'/\.ts?$/'），但Webpack要求这两个字段必须是正则表达式对象（不带引号的/\.ts?$/）。字符串形式的正则根本不会被Webpack解析，所以它完全没识别出你的.ts文件需要用指定Loader处理。
• exclude路径拼写错了：你写的是'/node-modules'，正确的应该是/node_modules/——不仅要改成正则，还要把连字符换成下划线（是node_modules不是node-modules）。

修正后的完整配置 #

module.exports = {
 mode: "development",
 entry:{
 app: "./words.ts",
 },
 module: {
 rules: [
 { 
   test: /\.ts?$/, 
   loader: 'awesome-typescript-loader', 
   exclude: /node_modules/ 
 }
 ]
 },
 resolve: {
 extensions: [ '.tsx', '.ts', '.js' ]
 },
 output:{
 path: __dirname + "/build",
 filename:"[name].js"
 }
}

为啥会出现这种奇怪现象？ #

当你的Loader规则没被触发时，Webpack会把.ts文件当成普通JavaScript文件直接打包——它本身只能理解JS/JSON，根本不会做TypeScript转译。你看到的“代码能被打包”其实是假象，要是你的TS代码里有类型注解这类JS不认识的语法，运行时肯定会报错。

不存在什么“需要覆盖的默认Loader配置”来处理TypeScript，问题完全出在你的规则没正确匹配到目标文件上。

另外提一句，现在更常用的TS Loader是ts-loader，如果后续想切换，配置逻辑是一样的，只要保证test和exclude是正确的正则就行~

内容的提问来源于stack exchange，提问作者user1690293