我们前面已经学了很多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中并没有我们新加的没用的代码,成功!

走近webpack(4)--css相关拓展的更多相关文章

  1. webpack配置css相关loader注意先后顺序

    一.问题描述 在webpack3中,引入animate.css失败. 二.问题分析 1.难道是入口main.js引用方式不对? import animate from 'animate.css' 2. ...

  2. 走近webpack(0)--正文之前的故事

    在前端工作的过程中,只要你接触过vue,angular,react,gulp就一定知道webpack或者听说过或者使用过webpack,但是或许你对webpack的使用方法并不是十分了解,只是会用写好 ...

  3. webpack导入css及各项loader

    1. webpack导入css 1) 下载相关的加载器 npm install style-loader css-loader -D 2)将index.css引入到mian.js中 import '. ...

  4. 【web前端面试题整理03】来看一点CSS相关的吧

    前言 昨天我们整理了14到js的题,今天我们再来整理14到CSS相关的题目,昨天整理时候时间有点晚了我便有点心浮气躁,里面的一些题需要再次解答,好了看看今天有些什么吧. PS:我这里挑一点来做就好了, ...

  5. IE的CSS相关的BUG(整理一)

    本来不想弄这个ie的bug的,真的很想让它快点死掉,可是事与愿违啊,没办法,还是贴出来,以备自用. 这个网页(http://haslayout.net/css/index)上例举了所有的IE和CSS相 ...

  6. CSS预编译与PostCSS以及Webpack构建CSS综合方案

    CSS全称Cascading Style Sheets(层叠样式表),用来为HTML添加样式,本质上是一种标记类语言.CSS前期发展非常迅速,1994年哈肯·维姆·莱首次提出CSS,1996年12月W ...

  7. Css相关用法个人总结

    Css相关用法个人总结

  8. react&webpack使用css、less && 安装原则 --- 从根本上解决问题。

    在webpack-react项目中,css的使用对于不同人有不同的选择,早起是推荐在jsx文件中使用 css inline js的,但是这种方法要写很多对象来表示一个一个的标签,并且对于这些对象,我们 ...

  9. webpack教程——css的加载

    首先要安装css的loader npm install css-loader style-loader --save-dev 然后在webpack.config.js中配置如下代码 意思是先用css- ...

随机推荐

  1. java程序调用xfire发布的webService服务

    昨天用xfire搭好了一个简单的webService的服务,可以在浏览器访问,今天便想要尝试以下如何调用这个服务及相关的方法.在网上查找了一些资料后,实现过程如下. 1.创建一个maven web项目 ...

  2. 芝麻HTTP:如何寻找爬虫入口

    寻找爬虫入口 1 .本次任务的入口 这个爬虫的更好的入口就是我们平常使用的搜索引擎.搜索引擎虽然有很多种,但是其实都是在干一件事,收录网页,处理,然后提供搜索服务.在平时使用的过程中,我们通常都是直接 ...

  3. 芝麻HTTP: Learning to Rank概述

    Learning to Rank,即排序学习,简称为 L2R,它是构建排序模型的机器学习方法,在信息检索.自然语言处理.数据挖掘等场景中具有重要的作用.其达到的效果是:给定一组文档,对任意查询请求给出 ...

  4. Drying POJ - 3104

    It is very hard to wash and especially to dry clothes in winter. But Jane is a very smart girl. She ...

  5. MFC关于多线程中传递窗口类指针时ASSERT_VALID出错的另类解决 转

    MFC关于多线程中传递窗口类指针时ASSERT_VALID出错的另类解决   在多线程设计中,许多人为了省事,会将对话框类或其它类的指针传给工作线程,而在工作线程中调用该类的成员函数或成员变量等等. ...

  6. JS显示动态的系统时间--JavaScript基础

    1.网页中实时显示当前时间 <!DOCTYPE html><html lang="en"><head> <meta charset=&qu ...

  7. 【BZOJ3143】游走(高斯消元,数学期望)

    [BZOJ3143]游走(高斯消元,数学期望) 题面 BZOJ 题解 首先,概率不会直接算... 所以来一个逼近法算概率 这样就可以求出每一条边的概率 随着走的步数的增多,答案越接近 (我卡到\(50 ...

  8. 【BZOJ1012】【JSOI2008】最大数(线段树)

    [JSOI2008]最大数 题目描述 现在请求你维护一个数列,要求提供以下两种操作: 1. 查询操作. 语法:Q L 功能:查询当前数列中末尾L个数中的最大的数,并输出这个数的值. 限制:L不超过当前 ...

  9. LCT总结

    LCT总结 类比树剖,树剖是通过静态地把一棵树剖成若干条链然后用一种支持区间操作的数据结构维护(比如线段树.树状数组),而LCT是动态地去处理这个问题. 大家都知道树剖用线段树维护,而LCT用\(sp ...

  10. Zabbix JMX监控之ActiveMQ

    监控原理: ActiveMQ作为依赖java环境的中间件,同样可以像tomcat一样用JMX(java扩展程序)监控.并且与tomcat不同的是,ActiveMQ自带了JMX,只需在配置文件中开启即可 ...