webpack - 使用 postcss-sprites 时，Webpack 不会将所有图像组合成单个精灵

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 文件仍然使用原始图像，我在包中找不到任何精灵图像。