两种方式引入图片：
1.background-image: url('')：使用url-loader，file-loader处理
2.img标签引入：使用html-loader处理
遇到问题：
webpack打包后，报Automatic publicPath is not supported in this browser的错误
解决：在output中加入publicPath: './'

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'build.js',
    path: resolve(__dirname, 'build'),
    // webpack5报Automatic publicPath is not supported in this browser的错误
    // 解决：添加publicPath: './'
    publicPath: './'
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /\.(gif|png|jpg)$/,
        // 需要下载url-loader,file-loader
        loader: 'url-loader',
        options: {
          // 小于8kb的图片会被转化为base64，大于8kb的图片会被打包到build文件中，并以hash值进行命名
          // 优点：减少服务器请求次数
          // 缺点：打包转换为base64后体积会变大
          limit: 8 * 1024,
          // 由于url-loader默认使用es6模块化解析，而html-loader是以commonjs模式引入图片的
          // 出现问题：图片路径会以[object, Module]形式引入导致图片引入失败
          // 解决：将esModule模式关闭
          esModule: false,
          // 为打包后的图片重新命名，[hash:10]：hash值的前十位，[ext]：以原来的扩展名为扩展名进行命名
          name: '[hash:10].[ext]'
        }
      },
      {
        // 解决用img标签引入图片的问题（负责引入img，从而被url-loader处理）
        test: /\.html$/,
        loader: 'html-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development'
}