大家好，又见面了，我是你们的朋友全栈君。
我们前面已经学了很多webpack基本的处理情况，一句话总结就是，一个优秀的webpack项目，主要的核心用法就是整合loader和plugin去处理你想要的任何需求。
下面，咱们一起来学学如何用webpack来处理less，sass等预编译器。先看看如何用webpack处理less。
国际惯例，第一步是安装：
代码语言：javascript复制npm install less less-loader --save-dev第二步，配置loader项:
代码语言：javascript复制{
test: /.less$/,
use: [{
loader: "style-loader"
},{
loader: "css-loader"
},{
loader: "less-loader"
}]
}最后，咱们来写一个less试试，直接在src/css/目录下，新建一个pink.less文件并写一些代码：
代码语言：javascript复制@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是一样的，这里不再赘述，直接上代码：
代码语言：javascript复制{
test: /.less$/,
use: extractTextPlugin.extract({
use: [{
loader: "css-loader"
}, {
loader: "less-loader"
}],
fallback: "style-loader"
})
}你可以试试，这两种代码打包之后会有什么样的区别，OK，我们npm run server一下，会发现页面中已经出现了一个粉色的盒子。
那么说完了less，继续说一下sass。仍旧是安装，配置。。。不多说，直接上代码：
代码语言：javascript复制npm install node-sass --save-dev
npm install sass-loader --save-dev
/*如果安装报错，可以试一下cnpm或者分开单独安装*/配置loader：
代码语言：javascript复制{
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：
代码语言：javascript复制// 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配置：
代码语言：javascript复制{
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，那么安装一下吧：
代码语言：javascript复制npm install --save-dev postcss-loader autoprefixer我们新建一个postcss.config.js，与webpack.config.js同级，并且写入相关代码，也就是引入autoprefixer：
代码语言：javascript复制module.exports = {
plugins: [
require('autoprefixer')
]
}然后把我们之前写过的css-loader的配置修改一下：
代码语言：javascript复制{
test: /.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader",
options: {
modules: true
}
}, {
loader: "postcss-loader"
}
]
}分离：
代码语言：javascript复制{
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中写入如下配置：
代码语言：javascript复制"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]什么意思呢？也就是全球浏览器使用率大于1%，最新的两个版本并且是ie8以上的浏览器。还有更多的参数可以查看这里https://github.com/ai/browserslist#queries。
增加了这个配置之后，再打包就完全没问题啦。
那么我们下面学习一下如何消除未使用的css，在实际项目中，我们可能会引入很多样式库，组件库，或者随着项目需求的增加，我们可能会添加一些新的css，而以前的css又不知道有没有用，也不敢去动，害怕牵一发而动全身。所以我们可以使用一个插件，在打包的时候自动去除未使用的css样式：
代码语言：javascript复制/*PurifyCSS-webpack要依赖于purify-css这个包，所以这两个都安装一下，-D是--save-dev的简写，i是install的简写*/
npm i -D purifycss-webpack purify-css然后我们引入glod和purifycss-webpack插件：
代码语言：javascript复制const glob = require('glob');
const PurifyCSSPlugin = require("purifycss-webpack");
/*引入插件就不多说了，glob是node的一个对象，我们需要在检查html模板以确定是否用到了css的时候用到glob*/然后，在plugins里这样配置：
代码语言：javascript复制new PurifyCSSPlugin({
paths: glob.sync(path.join(__dirname, 'src/*.html')),
})
/*glob.sync同步获取指定文件夹下的文件，这里的意思就是获取src下的所有html文件。有关node的知识不在这里多说，有兴趣的大家可以自行去学习*/配置成功，我们在src/index.css中写点没用的代码试试吧。发现打包后的css中并没有我们新加的没用的代码，成功！
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/124437.html原文链接：https://javaforall.cn
