webpack - postcss-sprites を使用する場合、Webpack はすべての画像を 1 つのスプライトに結合しません。

Question

postcss-loader と postcss-sprites を使用してすべての画像をスプライトに結合しますが、不明な理由で失敗します。

これは私のプロジェクト構造です:

+-- webpack.config.js
+-- src
|   +-- images
|       +-- bgc1.jpg
|       +-- bgc2.jpg
|   +-- index.js
|   +-- index.css

これは私のindex.jsファイルです：

import './index.css'

これは私のindex.cssファイルです：

div1{
  width: 100px;
  height: 100px;
  background: url('~@/images/bgc1.jpg')
}
div2{
  width: 100px;
  height: 100px;
  background: url('~@/images/bgc2.jpg')
}

これは私のwebpack構成です:

module.exports = {
  resolve: {
    alias: {
      '@': path.resolve(__dirname,'./src')
    }
  }
  entry: path.resolve(__dirname,'./src/index.js'),
  output: {
    path: path.resolve(__dirname,'./dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins:[
                require('postcss-sprites')({
                  spritePath: './src/images'
                })
              ]
            }
          }
        ]
      },
      {
        test: /\.(png|jpg)/,
        use: 'url-loader'
      }
    ]
  }
}

出力 css ファイルはまだ元の画像を使用しており、バンドル内にスプライト画像が見つかりません。