webpack导入图片出现问题

Question

按照文档抄的webpack.config.js配置，可是在浏览器打开html发现css可以被import进来，图片则没被加载

目录结构

index.js

Answer 1

路径问题webpack&nbsp;默认&nbsp;publicPath=''&nbsp;所以&nbsp;myIcon.src = ys;&nbsp;编译后类似于&nbsp;myIcon.src = publicPath + '[hash].jpg';output.path&nbsp;是编译后文件存放路径（即 dist 目录），因此编译后的图片（[hash].jpg）是存放在这个目录下你直接打开&nbsp;index.html&nbsp;文件，相当于根目录是&nbsp;index.html&nbsp;所在目录，而这个目录是没有图片文件的所以报 404 错误有两种解决方式：设置 publicPath 为 dist (不推荐这样)module.exports&nbsp;=&nbsp;{ &nbsp;&nbsp;output:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;publicPath:&nbsp;'dist/' &nbsp;&nbsp;} }用&nbsp;webpack-dev-server&nbsp;相应的 html 改为&nbsp;<script src="bundle.js"></script>，然后开启 server，访问&nbsp;http://localhost:port/PS: 注意发布的时候尽量设 publicPath 为 CDN 地址 或 网站静态文件所在地址。