Webpack 3.11+ExtractTextPlugin报错：解析index.ts遇Unexpected token需适配loader

哈哈，太懂你说的“超有用”错误提示是什么感觉了——就像有人告诉你“你需要个工具”但死活不说工具叫啥，简直挠人😅

你的问题核心很明确：Webpack 默认不认 TypeScript 的语法，所以得给它配上合适的 loader 来转译 .ts 文件，同时把配置补全。下面一步步来：

1. 先装必要的依赖 #

首先得把 TypeScript 本身和对应的 loader 装上，推荐用 ts-loader（和 Webpack 3 兼容性不错）：

npm install typescript ts-loader@3.5.0 --save-dev

这里指定 ts-loader@3.5.0 是因为最新版的 ts-loader 已经不支持 Webpack 3 了，选这个版本刚好匹配你的 Webpack 3.11。

2. 配置 Webpack 的模块规则 #

打开你的 webpack.config.js，添加处理 .ts 文件的规则，同时别忘了配置扩展名解析：

module.exports = {
  // 你的其他配置（entry、output这些）...
  module: {
    rules: [
      // 新增TypeScript处理规则
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/ // 排除node_modules里的文件
      },
      // 保留你原来的ExtractTextPlugin处理CSS的规则
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      }
    ]
  },
  // 让Webpack能识别.ts扩展名的文件
  resolve: {
    extensions: ['.ts', '.js']
  },
  // 你的ExtractTextPlugin插件配置
  plugins: [
    new ExtractTextPlugin('styles.css')
  ]
};

3. 添加 TypeScript 配置文件 #

在项目根目录新建一个 tsconfig.json，告诉 TypeScript 怎么编译你的代码：

{
  "compilerOptions": {
    "target": "es5", // 把TS转成ES5，确保浏览器能跑
    "module": "commonjs", // 匹配Webpack的模块系统
    "strict": true, // 开启严格模式，提前发现错误
    "esModuleInterop": true // 处理模块导入的兼容性
  },
  "include": ["src/**/*"] // 要编译的TS文件范围
}

最后检查下这两点 #

• 看看你的 index.ts 第50行附近有没有语法错误（比如箭头函数少了括号、逗号打错位置之类的），有时候语法小问题也会触发“Unexpected token”错误
• 确认所有依赖都装成功了，没有报错，然后重新跑 webpack 试试

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