webpack构建报CssSyntaxError，指向src/index.tsx未知字符问题求助

问题根因 #

该报错和已弃用模块、"use strict"语句本身没有任何关系，是webpack配置的loader规则错误导致的。

从你给出的报错日志中可以看到.tsx文件的处理链路：

!./node_modules/css-loader/dist/cjs.js!./node_modules/ts-loader/index.js!./src/index.tsx

webpack的loader执行顺序为从右到左，也就是说你的配置现在会先对index.tsx执行ts-loader转译为JS代码，再把转译后的JS代码传给css-loader处理。css-loader仅能识别CSS语法，完全不认识JS代码里的"use strict"等语句，所以才会抛出CssSyntaxError Unknown word错误。
你看到的第二个来自mini-css-extract-plugin的报错是上述问题触发的衍生错误。

修复方案 #

• 打开你的webpack配置文件，定位到module.rules配置段
• 检查所有样式相关loader的匹配规则（test字段），确保仅匹配.css、.scss、.less等样式后缀的文件，不要匹配.ts、.tsx等脚本文件
• 单独配置脚本文件的处理规则，仅对.js、.jsx、.ts、.tsx后缀的文件使用ts-loader/babel-loader，不要混入任何样式相关loader
• 确认样式loader的执行顺序正确：从右到左依次为 预处理器loader（如sass-loader）→ postcss-loader → css-loader → style-loader/mini-css-extract-plugin

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