Webpack不处理基于TypeScript的node_modules

基础概念

Webpack 是一个模块打包工具，它可以将多个模块（包括 JavaScript、CSS、图片等）打包成一个或多个文件。TypeScript 是一种由微软开发的自由和开源的编程语言，它是 JavaScript 的一个超集，添加了可选的静态类型系统和基于类的面向对象编程。

类型

配置文件：Webpack 的配置文件通常为 webpack.config.js。
加载器（Loaders）：用于转换某些类型的模块，例如将 TypeScript 转换为 JavaScript。
插件（Plugins）：用于执行范围更广的任务，如优化打包、环境变量注入等。

应用场景

单页应用（SPA）：Webpack 可以有效地打包 SPA 的所有资源。
库的开发：可以用来打包 JavaScript 库，便于分发和使用。
服务器端渲染（SSR）：结合 TypeScript 可以提高 SSR 项目的健壮性。

问题原因

Webpack 默认情况下不会处理 node_modules 目录中的文件，因为这些文件通常已经是编译过的，且体积较大，处理它们会增加构建时间。但是，如果你在使用 TypeScript 并且 node_modules 中有 TypeScript 编写的模块，Webpack 就需要处理这些文件。

解决方法

要让 Webpack 处理 node_modules 中的 TypeScript 文件，可以通过修改 Webpack 配置来实现。

// webpack.config.js
module.exports = {
  // ... 其他配置 ...
  module: {
    rules: [
      {
        test: /\.tsx?$/, // 匹配 .ts 和 .tsx 文件
        exclude: /node_modules\/(?!(your-module-to-include)\/).*/, // 排除 node_modules 中除了特定模块之外的所有文件
        use: 'ts-loader', // 使用 ts-loader 来处理 TypeScript 文件
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'], // 告诉 Webpack 解析这些文件扩展名
  },
};

在上面的配置中，exclude 字段用于指定哪些 node_modules 中的模块需要被 Webpack 处理。你需要将 your-module-to-include 替换为你想要包含的模块名称。