面试题：Webpack与TypeScript集成要点

Question

在Webpack项目中集成TypeScript，除了安装相关依赖外，需要对Webpack配置文件进行哪些关键修改？如何配置以实现对TypeScript中不同模块（如ES6模块、CommonJS模块）的正确处理？

Answer 1

1. 关键修改Webpack配置文件：
   • 添加loader：在module.rules数组中添加处理TypeScript文件的ts-loader。例如：

   module.exports = {
       module: {
           rules: [
               {
                   test: /\.tsx?$/,
                   use: 'ts-loader',
                   exclude: /node_modules/
               }
           ]
       }
   };
   

   • 配置解析：告诉Webpack如何解析TypeScript文件。在resolve字段中添加.ts和.tsx扩展名，以便Webpack能够正确识别TypeScript文件。示例如下：

   module.exports = {
       resolve: {
           extensions: ['.tsx', '.ts', '.js']
       }
   };
   

2. 处理不同模块：
   • ES6模块：TypeScript默认支持ES6模块语法，在Webpack配置中无需额外配置专门处理ES6模块。Webpack和ts-loader会按照标准的ES6模块规则处理导入和导出。例如，TypeScript代码中可以这样使用ES6模块：

   // 导出
   export const myFunction = () => {
       console.log('This is an ES6 module function');
   };
   // 导入
   import { myFunction } from './myModule';
   myFunction();
   

   • CommonJS模块：要处理CommonJS模块，TypeScript可以通过设置compilerOptions中的module为commonjs。在tsconfig.json文件中配置如下：

   {
       "compilerOptions": {
           "module": "commonjs"
       }
   }
   

   在Webpack项目中，ts-loader会根据这个配置将TypeScript代码编译为CommonJS模块格式。例如，TypeScript代码可以这样使用CommonJS模块语法：

   const myFunction = () => {
       console.log('This is a CommonJS module function');
   };
   exports.myFunction = myFunction;
   

   导入时可以使用require：

   const { myFunction } = require('./myModule');
   myFunction();