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

最新推荐文章于 2024-09-22 09:40:41 发布

yanhappyYY

最新推荐文章于 2024-09-22 09:40:41 发布

阅读量1.6k

点赞数

分类专栏： webpack

本文链接：https://blog.csdn.net/weixin_37064409/article/details/83185807

版权

webpack 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

2018/11/12 更新

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

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

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

问题描述

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

先来看配置文件
生成目录

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

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

问题来了：

问题：

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

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

但是在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. 对我来说用处也不大，希望有知道解决方案的告诉我