webpack 图片打包路径问题DIY解决方案

2018/11/12 更新

最近在迁移到vue框架，使用vue-cli脚手架时同样遇到图片字体资源打包问题，另写博客已解决问题。
主要思路：
将所有资源从根目录往下找 不需要考虑当前路径需要往上返回几层是 ./ 还是…/ 或者 …/…/

• 地址 ： https://mp.csdn.net/mdeditor/83995314#

---

原文如下：
为什么要DIY？因为我也不知道官方怎么解决的啊！ 如果你能告诉我的话，真的是帮大忙了！

问题描述

开发环境上的图片地址是放在根目录下面的，不用管，但是生产环境的地址引用一直不对！图片路径报错…

• 先来看配置文件
  

• 生成目录
  
  这种形式：打包路径是对的，但是引用路径是根据publicPath来决定的。
  生成的图片路径所有的都是

./images/[hash].[name].[ext]

问题来了：

问题：

1. 在首页通过html标签 引用正常，因为images和html页面处在同一级

<img src="./images/c82a8cb1.logo.png" alt="logo" srcset="">

2. 但是在css文件中 通过background-image:url引用的就错了

background-image: url(./images/8331fde6.osc-2.png);

正确的应该是 …/往上找一级

background-image: url(../images/8331fde6.osc-2.png);

就这个问题，没有找到解决方案,导致图片引用路径老是报错

DIY publicPath路径

既然找不到官方文档，又要解决问题就只有根据项目自己主动输出public 是"./"当前目录还是“…/”上一级目录。
配置如下：

{
                test: /\.(png|jpg|gif|svg)/,
                use: [{
                    loader: "file-loader",
                    options: {
                        name: 'images/[hash:8].[name].[ext]',
                        context: "dist", // 打包目录
                        limit: 8192,
                        publicPath: function (url) { // 访问目录
                            return url.indexOf('logo') > 0 ? './' + url : '../' + url;
                        }
                    }
                }]
            }

局限性

我所有页面只有logo是写在标签下的，所有只要检索到logo就可以返回./ 否则返回../

思考

1. 我看到有人讲file-loader是可以自动设置图片和字体路径的，但是我没有找到设置正确的方法
2. 在下方的链接里，也看到html-withimg-loder ，但只是解析页面的url链接的
3.  我是用的 <img src="${require('./image/logo.png')}" alt="logo" srcset=""> 
4. 对我来说用处也不大，希望有知道解决方案的告诉我

参考地址

webpack-file-loader 官方文档
https://webpack.js.org/loaders/file-loader/#src/components/Sidebar/Sidebar.jsx

webpack - html-loader 官方文档
https://webpack.docschina.org/loaders/html-loader/

url-loader 、file-loader 博客
https://blog.csdn.net/qq_38652603/article/details/73835153

图片的路径与打包 - 由于和我存放的路径不同，所以他讲的方案没有用到
http://www.cnblogs.com/ghost-xyx/p/5812902.html

如果知道解决方案请告诉我，我解决了也会更新