Run the Webpack project picture and favicon.ico can not be found, picture 404 error

Solution: Check the Developer Tools and the page, and image link is [object module] url-loader default content derived following the ES module syntax, while vue-loader to import resources default to commonJS way import options to modify url-loader, increasing esModule: false

favicon.ico404 error:
Method 1: Configure and modify HtmlWebpackPlugin directly in HtmlWebpackPlugin

new HtmlWebpackPlugin({
    
    
  title: 'Webpack Vue',
  favicon: path.resolve(__dirname, 'public/favicon.ico'),
  template: path.resolve(__dirname, 'public/index.html')
})

Method 2: copy-webpack-plugin

cnpm install -D copy-webpack-plugin
const CopyWebpackPlugin = require('copy-webpack-plugin')
new CopyWebpackPlugin([
      path.resolve(__dirname, 'public/favicon.ico')
    ])

After the modification, the running project is normal, and there is no error message prompt.