走近webpack(4)–css相关拓展

我们前面已经学了很多webpack基本的处理情况,一句话总结就是,一个优秀的webpack项目,主要的核心用法就是整合loader和plugin去处理你想要的任何需求。下面,咱们一起来学学如何用we

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

  我们前面已经学了很多webpack基本的处理情况,一句话总结就是,一个优秀的webpack项目,主要的核心用法就是整合loader和plugin去处理你想要的任何需求。

  下面,咱们一起来学学如何用webpack来处理less,sass等预编译器。先看看如何用webpack处理less。

  国际惯例,第一步是安装:

npm install less less-loader --save-dev

  第二步,配置loader项:

{
    test: /\.less$/,
    use: [{
           loader: "style-loader" 
      },{
          loader: "css-loader"
      },{
          loader: "less-loader" 
      }]
}

  最后,咱们来写一个less试试,直接在src/css/目录下,新建一个pink.less文件并写一些代码:

@base :pink;
#lessDiv{
    width:300px;
    height:300px;
    background-color:@base;
}

  还要在src/index.html中加入一个id名为#lessDiv的div,最重要的一点,不要忘了在src/entry.js中引入pink.less,引入的方法跟引入css文件是一样的。

  不知道大家还记不记的咱们在处理css文件的时候做过一件事情,也就是把css从js中分离出来,因为webpack打包是把css打包进js的,所以我们修改一下loader的配置方式,跟前面的css是一样的,这里不再赘述,直接上代码:

{
  test: /\.less$/,
  use: extractTextPlugin.extract({
        use: [{
            loader: "css-loader"
        }, {
            loader: "less-loader"
        }],
        fallback: "style-loader"
    })
  }

  你可以试试,这两种代码打包之后会有什么样的区别,OK,我们npm run server一下,会发现页面中已经出现了一个粉色的盒子。

  那么说完了less,继续说一下sass。仍旧是安装,配置。。。不多说,直接上代码:

npm install node-sass --save-dev
npm install sass-loader --save-dev
/*如果安装报错,可以试一下cnpm或者分开单独安装*/

  配置loader:

{
  test: /\.scss$/,
  use: [{
      loader: "style-loader" // creates style nodes from JS strings
  }, {
      loader: "css-loader" // translates CSS into CommonJS
  }, {
      loader: "sass-loader" // compiles Sass to CSS
  }]
}

  跟less一样编写一个scss文件写入sass代码并且在entry.js中引入,别忘了在index.html中写个div:

// css/blue.scss
$color: blue;
#sassDiv {
  $width: 100%;
  width: $width;
  height:200px;
  background-color: $color;
}
// index.html加入
<div id="sassDiv"></div>
//entry.js中引入
import sass from './css/blue.scss';

  同样的,把sass从js中分离,修改loader配置:

{
     test: /\.scss$/,
     use: extractTextPlugin.extract({
        use: [{
           loader: "css-loader"
         }, {
           loader: "sass-loader"
         }],
          fallback: "style-loader"
         })
 }

  npm run server后发现蓝色的div已经出现。其实大家可以自己去试着写一下sass的配置。因为跟less甚至之前的css几乎是一摸一样的。没有什么大的区别。那么下面咱们一起看看css3属性自动加上前缀,极大的方便我们的开发。

  自动加前缀,我们需要用到postCss和autoprefixer,那么安装一下吧:

npm install --save-dev postcss-loader autoprefixer

  我们新建一个postcss.config.js,与webpack.config.js同级,并且写入相关代码,也就是引入autoprefixer:

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

  然后把我们之前写过的css-loader的配置修改一下:

{
  test: /\.css$/,
  use: [
        {
          loader: "style-loader"
        }, {
          loader: "css-loader",
          options: {
             modules: true
          }
        }, {
          loader: "postcss-loader"
        }
  ]
}

  分离:

{
    test: /\.css$/,
    use: extractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
            { loader: 'css-loader', options: { importLoaders: 1 } },
            'postcss-loader'
        ]
    })
    
}

  那么,我们随便在index.css中加上点css3的样式试试吧。至此,当你npm run build 之后多半会发现既不报错,但是index.css中也没有加上相应的前缀。那么你需要在package.json中写入如下配置:

"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]

  什么意思呢?也就是全球浏览器使用率大于1%,最新的两个版本并且是ie8以上的浏览器。还有更多的参数可以查看这里https://github.com/ai/browserslist#queries

  增加了这个配置之后,再打包就完全没问题啦。

  那么我们下面学习一下如何消除未使用的css,在实际项目中,我们可能会引入很多样式库,组件库,或者随着项目需求的增加,我们可能会添加一些新的css,而以前的css又不知道有没有用,也不敢去动,害怕牵一发而动全身。所以我们可以使用一个插件,在打包的时候自动去除未使用的css样式:

/*PurifyCSS-webpack要依赖于purify-css这个包,所以这两个都安装一下,-D是--save-dev的简写,i是install的简写*/
npm i -D purifycss-webpack purify-css

  然后我们引入glod和purifycss-webpack插件:

const glob = require('glob');
const PurifyCSSPlugin = require("purifycss-webpack");
/*引入插件就不多说了,glob是node的一个对象,我们需要在检查html模板以确定是否用到了css的时候用到glob*/

  然后,在plugins里这样配置:

new PurifyCSSPlugin({
    paths: glob.sync(path.join(__dirname, 'src/*.html')),
})
/*glob.sync同步获取指定文件夹下的文件,这里的意思就是获取src下的所有html文件。有关node的知识不在这里多说,有兴趣的大家可以自行去学习*/

  配置成功,我们在src/index.css中写点没用的代码试试吧。发现打包后的css中并没有我们新加的没用的代码,成功!

 

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

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

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

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

(0)


相关推荐

  • php使用PdfParser搭配tcpdf解析pdf文件

    php使用PdfParser搭配tcpdf解析pdf文件前几天客户提出一个需求,就是在前台页面搜索文章时,若搜索词在文章附件的pdf文件中有出现的话就要将该文章作为搜索结果。我的思路是后台发布文章时循环检测每一个附件的格式,若附件格式为pdf的话就将里面的文字读取出来追加到一个$string变量里,然后将$string的作为一个file_text字段的信息保存到数据库后面做搜索的时候使用。我参考的一个回答地址是:https://baijiahao……

  • c++ 线程间通信方式「建议收藏」

    c++ 线程间通信方式「建议收藏」线程同步和线程互斥互斥:是指某一资源同时只允许一个访问者对其进行访问,具有唯一性和排它性。但互斥无法限制访问者对资源的访问顺序,即访问是无序的,线程间不需要知道彼此的存在。同步:是指在互斥的基础上(大多数情况),通过其它机制实现访问者对资源的有序访问,线程间知道彼此的存在。在大多数情况下,同步已经实现了互斥,特别是所有写入资源的情况必定是互斥的。少数情况是指可以允许多个访问者同时访问资源线程…

  • 谷歌浏览器驱动国内镜像下载地址[通俗易懂]

    谷歌浏览器驱动国内镜像下载地址[通俗易懂]谷歌驱动(driverchrome.exe)国内镜像下载地址:http://npm.taobao.org/mirrors/chromedriver/Windows、Linux、MAC系统均可下载下载解压,放到C:\ProgramFiles(x86)\Google\Chrome\Application(自己的谷歌浏览器安装路径)下即可…

  • 【机器学习】彻底理解神经网络中的反向传播算法(BP)

    【机器学习】彻底理解神经网络中的反向传播算法(BP)目录1,前言2,例程Step1前向传播Step2反向传播3,代码实现1,前言最近在看机器学习神经网络方面的知识,也看了很多关于反向传播算法原理的介绍,有一篇文章写的很好,在这里记录下,并且加入自己的理解。反向传播法其实是神经网络的基础了,但是很多人在学的时候总是会遇到一些问题,或者看到大篇的公式觉得好像很难就退缩了,其实不难,就是一个链式求导法则反复用。如果不想…

  • Pytest(8)parametrize参数化[通俗易懂]

    Pytest(8)parametrize参数化[通俗易懂]前言当某个接口中的一个字段,里面规定的范围为1-5,你5个数字都要单独写一条测试用例,就太麻烦了,这个时候可以使用pytest.mark.parametrize装饰器可以实现测试用例参数化。官方示

  • 防欺诈盗号,请勿支付或输入qq密码

    防欺诈盗号,请勿支付或输入qq密码不知道读者是否留意过这种情况:通过微信内置浏览器打开带有表单的页面,点击其中任何一个表单项都会在窗口顶部显示红色背景的防欺诈警告信息“防欺诈盗号,请勿支付或输入qq密码”,如下图所示  1)申请书下载地址:https://mp.weixin.qq.com/htmledition/res/urlrequest.doc。2)申请人主体材料包括:申请人的姓名(…

发表回复

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

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