webpack 图片路径问题

今天在学 webpack 时碰到一个问题，就是 webpack 通过插件 file-loader 打包图片后，在最终的 html 文件中图片地址是不对的，只有图片名称是对的，相信应该也有很多和我一样的初学者掉坑了。

解决方法：
在 webpack.config.js 的配置文件中添加一个属性

{
  test: /\.(png|svg|jpg)$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        publicPath: './dist',
        name: '[name].[ext]'
      }
    }
  ]
}

就是加一个 options ，然后指定 publicPath 路径( html 中的最终路径)和 name 。其中 [name] 表示原图片的 name，[ext] 表示原图片的后缀，如 .jpg、png 等。