走近webpack(3)–图片的处理[通俗易懂]

上一章,咱们学了如何用webpack来打包css,压缩js等。这一篇文章咱们来学习一下如何用webpack来处理图片。废话不多说,咱们开始吧。首先,咱们随便找一张你喜欢的图片放到src/images

大家好,又见面了,我是你们的朋友全栈君。

  上一章,咱们学了如何用webpack来打包css,压缩js等。这一篇文章咱们来学习一下如何用webpack来处理图片。废话不多说,咱们开始吧。

  首先,咱们随便找一张你喜欢的图片放到src/images目录下,然后把图片设置为背景图片,代码是这个样子。

src/index.html:

<div id="title"></div>
<div id="name"></div>
<div id="img"></div>
<script src="./entry1.js"></script>
<script src="./entry2.js"></script>

src/css/index.css:

body{
   background:red; 
}
#title{
  background:orange;  
  color:blue;      
}
#img{
    background: url(../images/dog.jpg);
    width: 500px;
    height: 500px;
}

  ok,我们写完了代码,现在webpack是无法解析的,我们可以打包试一下,发现会报错。嗯,没有加入loader肯定会报错的!

  那么,接下来我们来安装一下打包图片需要用到的loader:

npm install --save-dev file-loader url-loader

  在等待安装之际,我们先解释一下这两个loader分别都是做什么的:

  file-loader:解决引用路径的问题,拿background样式用url引入背景图来说,我们都知道,webpack最终会将各个模块打包成一个文件,因此我们样式中的url路径是相对入口html页面的,而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的,file-loader可以解析项目中的url引入(不仅限于css),根据我们的配置,将图片拷贝到相应的路径,再根据我们的配置,修改打包后文件引用路径,使之指向正确的文件

  url-loader:如果图片较多,会发很多http请求,会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码,生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中,最终只需要引入这个文件就能访问图片了。当然,如果图片较大,编码会消耗性能。因此url-loader提供了一个limit参数,小于limit字节的文件会被转为DataURl,大于limit的还会使用file-loader进行copy。其实简单来说,url-loader的作用就是根据配置来判断图片是否需要转换成字符串编码,来使项目的性能和速度更快。

  那么,接下来我们在module中配置一下loader,现在我们的module看起来是这样的,其中limit参数就是用来判断需要把图片转换成字符串编码的大小范围,单位是B。

module:{
        rules: [
            {
              test: /\.css$/,
              use: [ 'style-loader', 'css-loader' ]
            },{
               test:/\.(png|jpg|gif)/ ,
               use:[{
                   loader:'url-loader',
                   options:{
                       limit:500000
                   }
               }]
            }
          ]
    },

  唉?不对啊,你安装了两个loader,为什么只用了url-loader啊?!因为url-loader内置了file-loader。这里安装file-loader是为了方便下面用到的时候不用再安装了。

  OK,咱们来打包一下看看会发生什么吧。打开页面发现我们引入的图片已经显示了。

  下面说一下怎么把css从js中分离出来,我们上面的css都是通过import引入到js中再进行打包的,这样不利于维护,也违背了js,css,html互相分离的基本原则。但是一旦分离了css,那么原本的图片路径就会出现问题。我们下面来解决一下。但是webpack官方认为css就应该打包进js中以减少http请求。所以,仁者见仁智者见智,怎么做看具体情况来选择吧。

  其实要解决这个问题很简单,用插件,extracttextwebpackplugin。怎么安装就不说了,已经说了好多遍了,跟上面的安装方法一样,改个名字而已。

  既然是插件,我们就需要在config中引入并且new一个实例之后才可以使用:

module:{
    rules: [
        {
          test: /\.css$/,
/*修改了一下使用的方式*/ use: extractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) },{
           test:/\.(png|jpg|gif)/ ,
           use:[{
               loader:'url-loader',
               options:{
                   limit:500000
               }
           }]
        }
      ]
},
//插件,用于生产模版和各项功能
plugins:[
    new uglify(),
    new htmlPlugin({
        minify:{
            removeAttributeQuotes:true
        },
        hash:true,
        template:'./src/index.html'
       
    }),
/*这里new了一个插件的实例*/
    new extractTextPlugin("css/index.css")
],

  ok,我们兴致勃勃地去打包一下,竟然报错了,报错的主要原因是extracttextwebpackplugin当前还没有支持webpack4.x,那么我们该怎么办呢?别急,咱们想想办法解决:

npm install --save-dev extract-text-webpack-plugin@next
/*更新版本*/

  这样就可以打包了,但是我们打包完成之后发现index.html并没有引入相应的css,页面没有任何css,别急,我们来进行下一步解决这个问题。

  我们在config中定义一个路径变量:

var webpath={
    publicPath:"http://192.168.199.124:9090/"
}
/*就是你在devServer中定义的host和端口*/

  然后在output属性中定义一个publicPath属性:

output:{
    path:path.resolve(__dirname,'dist'),
    filename:'[name].js',
    publicPath:webpath.publicPath
},

  并且要把之前配置在devServer中的host修改成你自己的本机host,我的是http://192.168.199.124,如果你不知道,可以在cmd中使用ipconfig来查询。

  然后,我们npm run server一下,发现打开的页面已经有图片和样式了。

  那么我们就学会了如何处理css中的图片问题,下面我们学习一下如何处理html中的图片(也是用插件,各种插件,你可以去github随便找一个你喜欢的可以处理这中问题类型的插件):

  这里我们使用htmlwithimgloader,然后在config中如下配置:

npm install html-withimg-loader --save
/*因为在生产环节中也需要用到,所以使用--save命令*/
{
    test: /\.(htm|html)$/i,
     use:[ 'html-withimg-loader'] 
}

  完事了。。。。。。简单吧。

  前边的内容,打包后的图片并没有放到images文件夹下,要放到images文件夹下,其实只需要配置我们的url-loader选项就可以了。前面也说到了,要限制limit的大小,不然图片在小于limit的范围内会进行转码,咱们来小小的修改下代码就可以了:

{
   test:/\.(png|jpg|gif)/ ,
   use:[{
       loader:'url-loader',
       options:{
           limit:500,
           outputPath:'images/'
       }
   }]
}

  我们在src/index.html中加入一个图片的引入:

<div id="title"></div>
<div id="name"></div>
<div id="img"></div>
<!-- 通过src引入图片 -->
<img id="htmlImg" src="./images/dog.jpg">

  然后在src/css/index.css下写上这样的css:

body{
   background:red; 
}
#title{
  background:orange;  
  color:blue;      
}
#img{
    background: url(../images/dog.jpg);
    width: 500px;
    height: 500px;
}
/*设置图片大小*/
#htmlImg{
    width: 500px;
    height: 500px;
}

  然后我们npm run server一下看看结果吧。这里说明一下,可能细心的小伙伴会问,为什么以前打包用npm run build 而这里用npm run server呢?

  通常情况下,我们有两种环境,一种是dev,一种是prod,也就是开发环境和生产环境,一般在开发环境下,我们本地会通过webpack-dev-server通过express起一个node服务器,而不是真正的打包,而我们以前所一起学习的webpack使用方法即包含了开发环境下的需求,又有生产环境下的内容,当我们要把整个项目打包上线的时候,我们会压缩js,压缩图片,整合资源以减少http请求,但是我们在开发环境下的时候,往往需要更多的功能以使代码更容易阅读和debug。再有就是,我们在引入图片的时候,用的是绝对地址,也就是node起服务器后你本地的ip地址,如果不通过npm run server起本地服务器,是无法找到图片的。有兴趣的小伙伴可以试试npm run build然后手动打开dist下的html看看效果。

  至此,图片的处理方式就结束了。下一章咱们来看看怎么处理less啊,sass这样的css预编译语言,毕竟现在很少用css来写样式了。

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/124438.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • CloseableHttpClient发送http请求

    Stringresponse=null;//客户端接口请求路径Stringurl=EspConfig.getClientBaseUrl()+ClientUtil.CLIENT_METHODNAME;//创建请求CloseableHttpClienthttpclient=HttpClientBuilder.create().build();HttpPostpos…

  • 谷歌搜索好用吗_谷歌搜索引擎搜索技巧

    谷歌搜索好用吗_谷歌搜索引擎搜索技巧0前言相信大家在使用搜索引擎的时候,大部分情况下都是直接输入要搜索的关键词,然后在搜索结果里一个个点开查找。但除了特定信息外,搜索引擎同时也会返回大量无关的信息。有时候我们可能翻好几页也不一定能找到满意的结果,平白增加不少的工作量。其实,有一些特殊的技巧,可以对搜索结果进行限制和筛选,缩小检索范围,让搜索结果更加准确,大大提高我们的效率。下面,扩展迷就给大家介绍一些在进行谷歌搜索时可以使用的便捷技巧。其中,部分技巧在其他搜索引擎中也同样支持。文章目录0前言1.强制精确匹配2.AND

  • gb28181协议详解_GB28181收费吗

    gb28181协议详解_GB28181收费吗ssdp协议近似于http协议,事实上,和http协议相似得地方就是他得协议内容,当然,我们要去除他得端口和d类地址。为什么我在给其他员工或者面试得时候要他人深入一些,理解一下http协议,是因为理解了http协议,掌握ssdp也就不远了,很多人可能会问http协议有啥内容,无非就是get,post,put,delete么,还能怎么样,我经常问他们一点http协议怎么知道他结束了?虽然ssdp是udp协议,但是他依然需要\r\n来代表行结束,\r\n\r\n代表协议内容部分结束。……

    2022年10月11日
  • python做微信回复机器人_Python自动化脚本

    python做微信回复机器人_Python自动化脚本Python几十行代码轻松实现微信自动回复机器人最近因为太无聊了就考虑能不能做一些好玩的东西出来,正好在CSDN的推荐上看到大佬做的微信自动回复机器人,觉得很有趣,因此想着自己也能动手做一个。在此就写下我的具体思路和实现过程吧。首先,我是选择先找一个具有自动回复功能的机器,调用其API,上网搜索了一下,发现大家伙都推荐图灵机器人,然后我就溜过去找了一下图灵机器人,最后发现:它收费!!!可恶啊,难道刚开始就要结束了吗?后来我又开始了百度大法,最后发现了一个免费的机器人API:青云客。测试了一手

  • Nginx学习——Nginx启动、停止、重启和信号控制以及平滑升级

    Nginx的启动、停止、重启和信号控制以及平滑升级

  • SE是什么意思_pe是什么的英文简称

    SE是什么意思_pe是什么的英文简称AEApplicationEngineer应用工程师。定位:IC流片后,需要在通用应用系统(比如Intel/AMD主板)或者关键刻画的系统平台上进行功能验证,发现问题反馈给IC设计工程师。与FAE相比,AE偏向IC设计,FAE偏向市场对一点。FAEFieldAppilcationEngineer现场应用工程师,又称现场应用技术支持工程师。定位:IC产品在客户端送样时,可能出现技术问题,协助客户的工程技术人员解决技术问题;协助市场人员,从技术角度推广产品,开拓新客户,收集客户的技术问题与

    2022年10月24日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号