为什么Webpack会解析node_modules中Antd的less文件？如何阻止该行为？

问题根因 #

你当前的问题本质是Antd默认引入逻辑会加载内部的.less源文件，而你的Webpack配置中没有对应处理less的规则，同时你的css规则排除了整个node_modules目录，导致Antd相关样式资源无法被正确识别处理。

解决方案 #

方案一：调整Antd引入规则（推荐，无额外性能损耗） #

1. 如果你使用了babel-plugin-import做Antd按需加载，修改babel配置中该插件的参数：
   把原配置中的style: true改为style: 'css'。style: true会加载Antd的less源文件，style: 'css'则直接加载Antd官方预编译完成的css文件，不需要你额外处理less。
2. 如果你是全量引入Antd，把项目中的import 'antd/dist/antd.less'改为import 'antd/dist/antd.css'。
3. 调整Webpack的css处理规则，放开对Antd css的限制，避免样式丢失：

// 修改原css处理规则的exclude字段
{
  test: /\.css$/i,
  // 仅排除node_modules下非antd的其他css文件
  exclude: (filePath: string) => {
    return /node_modules/.test(filePath) && !/antd/.test(filePath)
  },
  use: [
    "style-loader",
    {
      loader: "css-loader",
      options: {
        // 仅对业务代码开启css modules，antd样式不需要模块化
        modules: {
          auto: (resourcePath: string) => !resourcePath.includes('node_modules'),
        },
        importLoaders: 1,
      },
    },
    "postcss-loader"
  ],
}

方案二：完全排除Antd打包（适合不需要按需加载的场景，构建速度最快） #

如果你完全不想让Webpack解析任何Antd和node_modules下的内容，可以直接通过CDN引入Antd的全量js和css资源，然后在Webpack配置中添加externals配置：

const config: Configuration = {
  // 其他配置不变
  externals: {
    'antd': 'antd'
  }
}

配置后Webpack会把Antd识别为外部依赖，不会打包也不会解析其内部的任何文件，自然也不会触发less文件的解析逻辑。

方案三：兜底忽略less文件 #

如果不想调整引入逻辑，可以直接新增规则让Webpack跳过所有less文件的处理：

1. 安装null-loader：npm i null-loader -D
2. 在module.rules中新增规则：

{
  test: /\.less$/,
  include: /node_modules/,
  use: 'null-loader'
}

注意该方案会导致Antd样式丢失，仅适合你已经通过CDN等其他方式引入了Antd样式的场景。

额外优化 #

你当前的js/ts规则已经配置了排除node_modules目录，不会编译node_modules下的js/ts代码，不需要额外调整。如果要进一步提升构建速度，可以开启Webpack的cache配置，或者用swc-loader替换ts-loader，编译速度会有明显提升。

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