今天在学 webpack 时碰到一个问题,就是 webpack 经过插件 file-loader 打包图片后,在最终的 html 文件中图片地址是不对的,只有图片名称是对的,相信应该也有不少和我同样的初学者掉坑了。css
解决方法:
在 webpack.config.js 的配置文件中添加一个属性html
{ test: /\.(png|svg|jpg)$/, use: [ { loader: 'file-loader', options: { publicPath: './dist', name: '[name].[ext]' } } ] }
就是加一个 options ,而后指定 publicPath 路径( html 中的最终路径)和 name 。其中 [name] 表示原图片的 name,[ext] 表示原图片的后缀,如 .jpg、png 等。webpack