webpack打包圖片路徑問題

那些年，我用webpack踩過的坑

webpack打包圖片文件路徑問題

output.publicPath

• 將publicPath在瀏覽器中引用時指定輸出文件的公共URL地址。

• 處理靜態資源引用地址用的 。

• 打包後默認狀況是url(文件名) 這樣必須確保資源文件和css處於同一目錄，但咱們顯然不但願這樣，但願修改打包引用地址。

{test: /\.(?:jpg|png|gif)$/,
use: [{
  loader: 'file-loader?name=img/[name].[hash:6].[ext]' //打包後在img目錄下
}}

上述文件通過webpack打包後，在打包文件中以下：

/***/ (function(module, exports, __webpack_require__) {

module.exports = __webpack_require__.p + "img/banner.d24625.png";

/***/ }),

可是個人設計是打包後的圖片是放在public下的img,此時圖片天然找不到（若是不加publicpath則爲img/xxx）,因此須要設置publicpath改變圖片路徑

解決方案：

output: {
    path: path.resolve("./web/public"),//打包後的文件存放的地方，上面提到的圖片此時在web/public/img目錄下
    filename: "bundle.js",//打包後輸出文件的文件名,
    publicPath: 'public/' //引用圖片路徑變爲web/public/img
  }