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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/weixin_37064409/article/details/83185807

2018/11/12 更新

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


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

问题描述

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

  • 先来看配置文件
    在这里插入图片描述

  • 生成目录
    在这里插入图片描述
    这种形式:打包路径是对的,但是引用路径是根据publicPath来决定的。
    生成的图片路径所有的都是

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

问题来了:

问题:

  1. 在首页通过html标签 引用正常,因为images和html页面处在同一级
<img src="./images/c82a8cb1.logo.png" alt="logo" srcset="">
  1. 但是在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

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

展开阅读全文

没有更多推荐了,返回首页