如何配置Webpack，使import "xxx.js"等效于import "xxx.ts"？

当然可以搞定这个需求！Webpack的resolve配置模块就是专门用来调整模块解析规则的，咱们通过几个简单的配置就能实现你的目标，下面给你详细拆解：

核心配置思路 #

我们需要让Webpack在解析带有.js扩展名的模块请求时，自动去查找对应的.ts文件。主要通过resolve.alias的正则匹配来实现重定向，再配合必要的loader配置处理TypeScript文件。

1. 完整的Webpack配置示例 #

在你的webpack.config.js里添加以下配置：

const path = require('path');

module.exports = {
  // 基础入口和输出配置（根据你的项目调整）
  entry: './src/index.ts',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  resolve: {
    // 关键：正则匹配所有以.js结尾的模块请求，替换为.ts
    alias: {
      '(.+)\\.js$': '$1.ts',
    },
    // 确保Webpack能解析.ts、.js等扩展名的文件
    extensions: ['.ts', '.js', '.json'],
  },
  module: {
    rules: [
      // 配置TypeScript loader，处理.ts文件
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  // 可选：如果用Webpack 5，可添加source-map支持
  devtool: 'source-map',
};

2. 针对特定目录的精确匹配 #

如果你的项目里同时存在.js和.ts文件，不想全局替换所有.js请求，可以限定只对src目录下的文件生效：

resolve: {
  alias: {
    // 仅匹配src目录下的.js请求，替换为对应的.ts
    '^src/(.*)\\.js$': path.resolve(__dirname, 'src/$1.ts'),
  },
  extensions: ['.ts', '.js', '.json'],
},

3. 必要的依赖安装 #

别忘了安装处理TypeScript所需的依赖：

npm install ts-loader typescript --save-dev

同时在项目根目录创建tsconfig.json（可以通过npx tsc --init快速生成，再根据你的需求调整）。

额外说明 #

• 如果你使用的是babel-loader配合@babel/preset-typescript来处理TypeScript，只需要把上面的ts-loader替换成对应的babel配置即可，核心的resolve规则是一样的。
• 这个配置会让所有import "xxx.js"的请求都被解析为xxx.ts，但不会影响node_modules里的模块（因为我们的正则不会匹配第三方模块的路径，除非你特意调整）。

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