Webpack 不处理 CSS 背景图像

Question

The following Webpack configuration does not allow me to process CSS images as the background property:

background: url('./hero.jpg') no-repeat right;

results in the following error:

ERROR in ./src/app/components/Contact/Contact.style.scss (./node_modules/mini-css-extract-plugin/dist/loader.js??ruleSet[1].rules[1].use[1]!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/app/components/Contact/Contact.style.scss)
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve 'assets/img/section/hero.jpg' in 

What URL should I pass ass the CSS property so that Webpack would catch it?

Dist directory screenshot:

Public directory screenshot:

Answer 1

Resolved myself. Please reach for helping with the solution:

{
  test: /\.(png|jpg|gif)$/,
  loader: 'file-loader',
  options: {
    publicPath: path.resolve(__dirname, '/assets/img'),
    outputPath: 'assets/img',
    name: '[name].[ext]'
  }
}