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
  }