webpack 打包html里面img标签的图片怎么自定义输出路径

Question

我现在打包之后dist里面的图片路径变成这样了用的是自带的html-loader{    test: /\.html$/,    use: {        loader: 'html-loader',        options: {            // ignoreCustomFragments: [],            // root: path.resolve(__dirname, 'src'),            // attrs: ['img:src']        }    }}src下图片路径dist下的图片路径路径虽然是可以显示，项目也能运行，但是个人有强迫症，想让dist下的图片路径和src的一样，有没有搞定过这个问题

Answer 1

那你css里的图片怎么配的，我弄了html就顾不了css，只有一个url-loder，我又想把html放最外边，css放文件夹，两个实在调不过来

Answer 2

更新： 最后使用相对路径“/”解决
我是用了html-loader和ExtractTextPlugin插件，因为html-loader也会走url-loader，所以在打包的时候会出现html里面的img路径与css里面引用的图片的路径经常会有问题，比如一个是../assets一个是./assets，很头疼，最后解决办法是在ExtractTextPlugin > options里面加上publicPath。

Answer 3

在html模版中，得使用require()来获取图片路径，楼主要是不怎么会用webpack，可看下这教程webpack简易教程，已上传到github

Answer 4

问题已经搞定了，直接修改url-loader的输出路径就行了

另外，不知道谁误导的，网上都说用html-withimg-loader才能搞定。。。根本没这个必要再加个loader，直接用html-loader就行了

Answer 5

url-loader定义了publicpath为'./'后，那css和html文件里的图片路径就都是'./'了，岂不是css和html必须是相同父级才行?