webpack导入图片出现问题

Question

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

Answer 1

路径问题

1. webpack 默认 publicPath='' 所以 myIcon.src = ys; 编译后类似于 myIcon.src = publicPath + '[hash].jpg';

2. output.path 是编译后文件存放路径（即 dist 目录），因此编译后的图片（[hash].jpg）是存放在这个目录下

3. 你直接打开 index.html 文件，相当于根目录是 index.html 所在目录，而这个目录是没有图片文件的所以报 404 错误

有两种解决方式：

1. 设置 publicPath 为 dist (不推荐这样)

   module.exports = {
     output: {
       publicPath: 'dist/'
     }
   }

2. 用 webpack-dev-server 相应的 html 改为 <script src="bundle.js"></script>，然后开启 server，访问 http://localhost:port/

PS: 注意发布的时候尽量设 publicPath 为 CDN 地址 或 网站静态文件所在地址。