如何让Webpack完全忽略项目中无法编译的misc文件夹？

我明白你想要的是让Webpack只处理指定的src文件夹，完全忽略misc目录，而不是通过排除的方式来规避。这个问题通常是因为ts-loader会遵循tsconfig.json的文件包含规则，或者Webpack的loader配置没有明确限定处理范围导致的。

核心解决方案：采用「仅包含」的配置思路 #

我们需要从两个层面入手，确保Webpack和TypeScript都只关注src目录：

1. 修改Webpack配置，明确只处理src下的TS文件

把你现有的module.rules改成只包含src目录，替换掉原来的exclude规则：

//@ts-check
"use strict"
const path = require("path")
/**@type {import('webpack').Configuration}*/
const config = {
  target: "node",
  entry: "./src/index.ts",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    libraryTarget: "commonjs",
    devtoolModuleFilenameTemplate: "../[resource-path]",
  },
  devtool: "source-map",
  resolve: {
    extensions: [".ts"],
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        // 仅包含src目录下的ts文件，完全限定处理范围
        include: path.resolve(__dirname, "src"),
        use: [
          {
            loader: "ts-loader",
          },
        ],
      },
    ],
  },
}
module.exports = config

2. 调整tsconfig.json，限制TypeScript的编译范围

很多人会忽略这一步：如果你的tsconfig.json里include字段包含了所有.ts文件（比如"**/*.ts"），ts-loader会自动编译这些文件，哪怕Webpack的entry没有引用它们。所以要把include限定为src：

{
  "compilerOptions": {
    // 保留你原有的编译选项
    "target": "ESNext",
    "module": "CommonJS",
    "sourceMap": true,
    "outDir": "./dist",
    "strict": true
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}

为什么之前的配置无效？ #

• 你添加的第二个test: /\.ts$/规则没有指定loader，完全是无效配置，不会起到排除作用。
• exclude规则只是告诉loader「不要处理这些文件」，但如果TypeScript本身通过tsconfig把misc目录纳入了编译范围，ts-loader还是会尝试处理它们。
• Webpack本身不会主动编译未被entry依赖的文件，问题根源是ts-loader遵循了tsconfig的全局包含规则。

验证效果 #

修改完配置后，执行webpack --mode development，Webpack会完全忽略misc文件夹，就像它不存在一样，顺利完成编译。

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