(三)webpack打包其他资源以及优化_postcss 打包优化-程序员宅基地

技术标签: webpack  javascript  

1.处理css的兼容性

css的一些属性不是所有浏览器都兼容的,通常需要手动配置,不容易维护,而webpack打包的时候可以做到通过设置css属性需要支持的浏览器,打包时会自动编译成各个浏览器支持的属性。

  1. 需要使用postcss处理,下载两个包:npm i postcss-loader postcss-preset-env -D
  2. 写入对应处理的规则(postcss-loader)
    { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'] },
  3. postcss需要新建一个配置文件“postcss.config.js”,引入插件:
    module.exports={
        plugins:[
            require('postcss-preset-env')()  
        //加载这个插件的时候会自动找到package.json里设置的浏览器列表
        ]
    }
  4. 在package.json中设置浏览器规则列表:
    {
        //其他内容
    
        "browserslist":[  
        "> 0.2%",  //80%以上的浏览器
        "last 2 versions",  //浏览器最近的两个版本
        "not dead"  //已过期废弃的浏览器不再使用
      ]   //这里有"browserslist":{}和"browserslist":[]两种写法,前者可以指定开发时和运行时各用哪种规则,而后者默认是运行时的规则
    }
  5. less和sass也是同样的处理方法,配置完成后执行,符合规则的属性不变,不符合规则的会自动写进兼容的属性

 2. 压缩CSS

下载插件:npm i optimize-css-assets-webpack-plugin -D(压缩css是直接用插件处理,不用loader)

  1. 引入插件
    const OptimizeCssAssetsWebpackPlugin =require('optimize-css-assets-webpack-plugin')
  2. 使用插件
    plugins: [
        //.....
       
        new OptimizeCssAssetsWebpackPlugin(),  
        //一般项目上线的时候再进行css压缩,开发时使用原始的css方便处理
      ],

3. webpack打包图片资源

图片有两种引入方式:css引入和html引入

 在css中引入图片

下载url-loader和file-loader两个包

  1. 引入图片
  2. 配置loader
    // { test: /\.(png|jpg|jpeg|gif)$/, use: ['url-loader',{loader:'file-loader',options:{}}] }   //use有多个loader时
          { 
            test: /\.(png|jpg|jpeg|gif)$/, 
           
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/m0_50744582/article/details/120334287

智能推荐

在Unity3D中的渲染优化-Drawcall的概念_draw call cpu设置渲染状态-程序员宅基地

文章浏览阅读338次。Draw Call本身的含义很简单,就是CPU调用图像编程接口,如OpenGL中的glDrawElements命令或者DirectX中的DrawIndexedPrimitive命令,以命令GPU进行渲染的操作。一个常见的误区是,Draw Call中造成性能问题的元凶是GPU,认为GPU上的状态切换是耗时的,其实不是的,真正“拖后腿”其实的是CPU。在深入理解Draw Call之前,我们先来看一下CPU和GPU之间的流水线化是怎么实现的,即它们是如何相互独立一起工作的。1.CPU和GPU是如何实现_draw call cpu设置渲染状态

mysql8创建用户并授予权限和移除权限_mysql8授权-程序员宅基地

文章浏览阅读256次。mysql8创建用户并授予所有库的所有权限_mysql8授权

MySQL联合索引与索引下推图文详解_联合索引图解-程序员宅基地

文章浏览阅读3k次,点赞5次,收藏25次。联合索引的树结构、最左匹配原则、如何选择合适的索引列顺序、索引下推图文讲解_联合索引图解

nslookup-程序员宅基地

文章浏览阅读49次。nslookupserver 114.114.114.114set q=mx set q=aset q=ptrset q=ns转载于:https://www.cnblogs.com/huang99882008/p/10696756.html_nslookup时显示的server为114.114.114.114

计算机控制系统的典型类型是什么,计算机控制系统作业参考答案-程序员宅基地

文章浏览阅读2.2k次。计算机控制系统作业参考答案 (15页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦!9.90 积分计算机控制系统作业参考答案作业一第一章11什么是计算机控制系统画出典型计算机控制系统的方框图。答计算机控制系统又称数字控制系统,是指计算机参与控制的自动控制系统,既用算机代替模拟控制装置,对被控对象进行调节和控制控制系统中的计算机是由硬件和软件两部分组成的硬..._kkxkt

通过广域网(Intelnet)进行远程唤醒[或开机]_magic packet utility-程序员宅基地

文章浏览阅读4k次。WAN远程唤醒与LAN远程唤醒有着诸多不同,WAN远程唤醒首先需要主板、网卡等硬件的支持,需要一条有效的Intelnet连接,与Lan远程唤醒不同的是,WAN远程唤醒需要经过路由器。WAN远程唤醒与LAN远程唤醒有着诸多不同,WAN远程唤醒首先需要主板、网卡等硬件的支持,需要一条有效的Intelnet连接,与Lan远程唤醒不同的是,WAN远程唤醒需要经过路由器,因此下面我就来详细讲解如何在路由_magic packet utility

随便推点

Linux小白入门教程 - Ch4.3 文件搜索命令_在linux中 1数据块 512字节 0.5k 100mb = 102400kb = 204800-程序员宅基地

文章浏览阅读152次。4.3 文件搜索命令4.3.1 文件搜索命令 findfind 文件搜索命令名称:find命令所在路径:/bin/find执行权限:所有用户功能:文件搜索语法:find [搜索范围] [匹配条件]建议:不要在服务器使用高峰期的时候使用 find 进行查找查找的过程中,搜索的范围越小越好,尽量不要在根目录进行查找搜索的条件越精准越好,找到的速度越快,消耗的资源越少根据文件名查找* 匹配任意字符; ? 匹配单个字符[]# find /etc -name init _在linux中 1数据块 512字节 0.5k 100mb = 102400kb = 204800

php 取余 小数,PHP实现大数(浮点数)取余的方法-程序员宅基地

文章浏览阅读211次。一般我们进行取余运算第一个想到的就是用百分号%,但当除数是个很大的数值,超出了int范围时,这样取余就不准确了。php大数(浮点数)取余函数:/***php大数取余**@paramintorfloat$bn除数*@paramint$sn被除数*@returnint余数*///大数(浮点数)取余方法functionKmod($bn,$sn){returnintva..._php 小数能取余吗

NHibernate *.hbm.xml 文档-程序员宅基地

文章浏览阅读96次。# class<class name="ClassName" (1) table="tableName" (2) discriminator-value="discriminator_value" (3) ...

明明很努力的写博客,为啥没人看?试试这些方法和工具(建议收藏)_csdn发布的博客会有人去看嘛-程序员宅基地

文章浏览阅读2.4k次,点赞38次,收藏84次。知乎高赞:文中列举了互联网一线大厂程序员都在用的工具集合,涉及面非常广,小白和老鸟都可以进来看看,或许有新收获,也希望大家把自己的工具分享在评论区。_csdn发布的博客会有人去看嘛

苹果安卓鸿蒙对比,鸿蒙OS对比iOS,华为再次“超越”,流畅度大幅领先苹果!...-程序员宅基地

文章浏览阅读264次。随着越来越多的细节被曝光,鸿蒙系统也已经进入到了最后内测阶段。近日,华为消费者业务软件部总裁公开王成录表示,华为手机从6月开始,可以陆续升级到鸿蒙系统正式版。这是华为官方首次明确告知正式版推动的时间,此前在2月的Mate X2发布会上,余承东曾宣称会在4月份推动鸿蒙OS。事实上,最近已经有很多用户升级到了鸿蒙系统,不过需要注意的是,现在用户们使用的都是内测版和公测版。前不久,华为刚开启了鸿蒙OS ..._苹果系统,安卓系统,华为鸿蒙系统排名

postgresql upsert 的实现_pqsql upsert-程序员宅基地

文章浏览阅读3.3k次。os: ubuntu 16.04db: postgresql 9.6.8postgresql upsert 是从 9.5 开始引入的功能,语法中并没有 upsert 这个关键字,是通过 insert into 来实现的。所以现在 postgresql 也可以使用 insert into 来实现 oracle 的 merge into 功能。强大,赞一个。语法# su - postgre..._pqsql upsert

推荐文章

热门文章

相关标签