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 等。