webpack 的 css-loader style-loader 无法处理 require.context() ?

Question

我已经在 config 里面配置了css-loader style-loader。

如果在 index.ts 里使用 require 的形式引入 css，那么打包之后样式可以成功渲染在页面上，但如果我使用 require.context() 批量引入 css，那么页面的样式就不会被正确渲染。

之前有三个猜测：

1. require.context() 不好用。经过测试，使用 file-loader 可已将通过 require.context() 引入的图片打包。
2. 引入 css 的时候只能引入一个文件作为入口。经过测试，连续 require 两个 css 文件也能成功渲染。
3. require.context() 参数输入有问题。经过测试，如果将 css 改为使用 file-loader 打包，所有文件都会被识别并打包，所以 require.context() 获取也没问题。

万策尽矣，实在想不通了。

// require('./static/css/index.css');
// require('./static/css/copy.css');
require.context('./static/css/', true, /\.css$/)
require.context('./static/resource/img/', true, /\.(webp|jpg|png)$/)

import main from './script/main'
main.init();

      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
        exclude: /node_modules/
      },
      {
        test: /\.(webp|jpg|png)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'img/'
          }
        },
        exclude: /node_modules/
      }