webpack怎么打包img标签?

Question

现在项目中图片使用有两种方式:
1.img标签
2.背景图

webpack.config.js

test: /\.(png|jpg)$/,
            loaders: ['url?limit=8192&name=image/[name].[ext]']

• 当作为背景图的时候,小于limit的时候,会以 base64 显示图片,当图片大于 limit 的时候会将图片生成到 image/ 目录下,但是奇葩的地方出现了

background-image:url("../image/xxx.jpg")
//在打包后的css文件会变成
background-image:url(image/xxx.jpg)
//没有了 ../ 和双引号,尽管image目录下有图片,但是引用路径不对了

• 当使用img标签时,图片根本就不会移动到 image 目录下,不知道具体原因,求大神帮解答下.

Answer 1

在一般全部編譯到 JS 的狀況下 webpack 會在 JS 的編譯結果應該是如下

__webpack_require__.p + "image/pretty.jpg";

所以猜測你有使用 ExtractTextPlugin ，這樣的話參考這篇看看能否解決您的問題

Answer 2

我想你应该是用的webpack-dev-server 需要编译出来
过去这么久应该也解决了

Answer 3

可以参考：https://github.com/vuejs/vue-...

Answer 4

当你使用url-loader之后，打包前css里面引入图片资源的路径都会被url-loader&name=./images/[name].[ext]，这里定义的name路径给替换掉，也就是你在css里面引入的路径跟打包后css文件中的图片路径不相干，他已经被url-loader加工了，所以，你需要根据url-loader的name以及name所依赖的output.path上做文章，还有output.publicPath也会在打包后的资源路径上插入