【webpack】中file-loader和url-loader使用方法

1. file-loader 可以指定要復制和放置資源文件的位置，以及如何使用版本哈希命名以獲得更好的緩存。此外，這意味着 你可以就近管理圖片文件，可以使用相對路徑而不用擔心部署時 URL 的問題。使用正確的配置，webpack 將會在打包輸出中自動重寫文件路徑為正確的 URL。

2. url-loader 允許你有條件地將文件轉換為內聯的 base-64 URL (當文件小於給定的閾值)，這會減少小文件的 HTTP 請求數。如果文件大於該閾值，會自動的交給 file-loader 處理。

 

參考如下配置

    {
        test: /\.(png|svg|jpe?g)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              name: 'images/[name].[hash:7].[ext]',
              publicPath: './'
            }
          }
        ]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        loader: 'file-loader'
      }