Webpack，css-loader或postcss-loader在CSS文件中输出错误的图像路径

Question

我发现有很多人对此有疑问，但没有适合我的解决方案。我的文件结构是：

src
--images
--scss
..
dist
--css
--images
..

在我的scss文件中，我有background-image: url('../assets/image/example.png')

在我的输出main.css文件中，背景图片更改为assets/image/example.png

我知道有人说过要创建一个resolve alias，然后将URL更改为别名~alias/image/example.png。由于css文件中的网址未更新，因此无法使用。

我尝试了许多不同的方法，但似乎没有任何方法可以解决该问题。我知道是否将main.scss放在主src文件夹中不会有问题，但是我不想这样做。

这是我的webpack配置：

module: {
    entry: {
      main: path.join(__dirname, CONFIG.src),
    },
    output: {
      filename: '[name].js',
      path: path.join(__dirname, CONFIG.output),
    },
    rules: [
        {
            test: /\.(s*)css$/,
            use: [
                'style-loader',
                {
                    loader: 'file-loader',
                    options: {
                        name: '[name].build.css',
                        context: './',
                        outputPath: output,
                    },
                },
                {
                    loader: 'extract-loader',
                },
                'css-loader',
                'sass-loader',
                'postcss-loader',
            ],
        },
        {
          test: /\.(png|jpg)$/,
          include,
          exclude,
          use: [
            {
              loader: 'file-loader',
              options,
            },
        ],
      },
    ],
    plugins: [
      // Copy the images folder and optimize all the images
      new CopyWebpackPlugin(options),
      new ImageminPlugin({ test: /\.(jpe?g|png|gif|svg)$/i }),
    ],
},

更新我刚刚将publicPath: '../',添加到了图像file-loader选项中，就达到了效果。如果有更好的方法，我很想知道！