webpack入门之css处理(css预处理器和css后置处理器)

本文 webpack 版本 ^5.73.0、webpack-cli 版本 ^4.10.0

简介

说到前端构建就肯定离不开css的处理。在前端日新月异的潮流下，css也不再是单纯的css了，涌现了很多css周边技术，比如我们常听到的css预处理器(PreCss)和css后置处理器(PostCss)。那这两个东西又是啥呢？他们的区别又是什么呢？以及在webpack中又怎么去处理它呢？

带着疑问，我们今天就来一探究竟

看完本文你将学到：

1. 知道什么是css预处理器
2. css预处理器都有哪些
3. css预处理器有哪些作用
4. css预处理器怎么编译成css
5. 知道什么是css后置处理器
6. css后置处理器有哪些作用
7. css后置处理器是怎么处理css的
8. 怎么使用webpack来处理css预处理器和css后置处理器
9. 编译适配目标浏览器的配置 browserslist

css预处理器PreCss

为什么会出现CSS预编译器这个东西呢？这就要谈到CSS的不足了：

1. 没有变量(新的规范已经支持了)。
2. 不支持嵌套。
3. 编程能力较弱，代码复用性差。
4. 没有模块化。

为了弥补这些不足之处，CSS预编译器应运而生。而谈到CSS预编译器，就离不开这三剑客Sass、Less、Stylus。

历史上，最先登场的是Sass，因为出现最早，所以也是最完善的，有各种丰富的功能；Less的出现伴随着Bootstrap的流行，因此也获得大量用户；最后是Stylus，由TJ大神开发(敬大神)，由于其简洁的语法，更像是一门编程语言，写起来非常Cool。所以下面我们来做一个简单的对比。

scss

Sass3.0版本开始使用的是标准的CSS语法，基本与SCSS一样。默认Sass使用.scss扩展名。

// scss新版语法规则
.container {
    background: #f6f6f6;
    min-height: 100%;
}

同时，Sass也支持老的语法，这种跟常规的CSS略有不同，更为严格，任何的缩进和字符的错误都会造成样式的编译错误，Sass可以省略{}和;，而且文件使用.sass扩展名，语法如下：

.container
    background: #f6f6f6
    min-height: 100%

更多特性可自行查看sass中文文档学习。

less

Less是CSS的一种扩展形式，在CSS语法基础上添加了很多额外功能。从语法规则来讲，Less和Scss一样，都是用CSS的标准语法，只是Less的源文件扩展名是.less，举个栗子🌰:

.block {
    height: 30px;
    padding-bottom: 10px;
    color: #666;
    font-weight: normal;
}

更多特性可自行查看less中文文档学习。

stylus

Stylus语法多变一些，文件扩展名是.styl，Stylus既接受标准的CSS语法，也可以跟Sass老的语法规则一样，使用缩进控制，如下所示：

// 类似于CSS标准语法
.head {
    color: #ebebeb;
    background-color: #666;
}

// 省略大括号
.head 
    color: #ebebeb;
    background-color: #666;

// 省略大括号和分号
.head 
    color: #ebebeb
    background-color: #666

更多特性可自行查看less中文文档学习。

普通构建

说了这么多css预处理器，预处理器代码能在浏览器运行吗？这些语法能被浏览器直接识别吗？

当然是不能的，所以在正式上线之前我们都需要进行编译，也就是把这些.scss、.less、.styl文件转变成浏览器能识别的.css文件。

那我们怎么进行编译呢？这就需要用到对应的工具了。

sass

编译sass首先需要安装sass。

npm install -g sass

然后我们创建styles.scss文件

安装完后它会提供一个sass命令，使用该命令就可以将.scss文件编译成.css文件了。

sass styles.scss styles.css

我们来看下编译后的效果

less

编译less首先需要安装less。

npm install -g less

然后我们创建styles.less文件

安装完后它会提供一个lessc命令，使用该命令就可以将.less文件编译成.css文件了。

lessc styles.less styles.css

我们来看下编译后的效果

stylus

编译stylus首先需要安装stylus。

npm install -g stylus

然后我们创建styles.styl文件

安装完后它会提供一个stylus命令，使用该命令就可以将.styl文件编译成.css文件了。

stylus styles.styl -o styles.css

我们来看下编译后的效果

上面的编译笔者都是全局安装的，当然你也可以局部安装。

我们可以看到，css预处理器虽然好用，但是每次上线都需要我们手动打包成css，然后再发布是不是有点麻烦。有没有什么更好更高效的办法呢？

当然是有的，我们可以借助webpack，在上线前统一编译即可。下面笔者就来说说使用webpack来编译这三个css预处理器。

使用webpack构建

创建项目

首先我们创建一个文件夹，然后初始化package.json文件。

// 创建webpacktest文件夹
mkdir webpacktest

// 进入webpacktest文件夹
cd webpacktest

// 创建package.json
npm init

创建scss、less、stylus源文件

接下来我们创建scss、less、stylus源文件，在根目录下创建src文件夹，在里面分别创建index.scss、index.less、index.styl

然后在里面分别添加内容

index.less

index.scss

index.styl

并在入口文件index.js里面引入我们的样式文件

安装webpack 和 webpack-cli

接下来我们本地安装webpack 和 webpack-cli

npm i webpack webpack-cli -D

安装处理scss、less、stylus的loader

因为webpack默认只能处理js，如果需要处理其他语言的话需要安装对应的loader，这里我们需要分别安装处理scss、less、stylus文件的less、less-loader、node-sass、sass-loader、stylus、stylus-loader

npm i less less-loader node-sass sass-loader stylus stylus-loader -D

安装处理css的loader

当然，css也是需要处理的，所以也需要对应的loader。

npm i css-loader style-loader -D

配置webpack.config.js

然后我们在根目录下创建webpack.config.js文件，并做如下配置

module.exports = {
  mode: "development",
  module: {
    rules: [
      // Less 配置
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      // Sass 配置
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      // stylus 配置
      {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
    ],
  },
};

loader的配置是有顺序要求的，它的执行顺序是从右到左的。比如use: ['style-loader', 'css-loader']，它先用css-loader处理CSS的模块化，然后style-loader把css-loader解析后的样式代码内联插入到HTML中的style标签内。

配置编译脚本

然后我们在package.json里面创建运行webpack的脚本

"scripts": {
  "webpack1": "webpack"
},

运行脚本

然后我们运行npm run webpack1，webpack会读取webpack.config.js文件，进行打包。

默认会读取根目录的src文件夹，默认将打包结果放到根目录dist文件夹下。

运行打包命令后我们可以看到，在根目录下生成了dist文件夹，并输出了main.js

看效果

编译后的文件是很混乱的，不容易看懂，所以我们需要测试刚才的样式是否成功。

我们首先在根目录下创建index.html，并引入构建好的main.js文件，然后创建三个div，分别引用刚才的样式。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>webpack</title>
  </head>
  <body>
    <div class="box1">less test</div>
    <div class="box2">scss test</div>
    <div class="box3">stylus test</div>
    <script src="./dist/main.js"></script>
  </body>
</html>

然后在浏览器运行，我们来看看效果

nice! 至此使用webpack构建less、scss、stylus就完成啦。

将css抽离成单独的css文件

前面说到，style-loader的作用是将处理好后的CSS样式代码放到HTML的style标签中。

那么，如果我需要将处理后的CSS文件单独编译成一个.css文件，引入到HTML中，webpack需要怎么做呢？

我们可以使用mini-css-extract-plugin插件提取css代码为单独的CSS文件，然后在HTML中通过link标签引入CSS文件。

npm install mini-css-extract-plugin -D

然后我们使用MiniCssExtractPlugin.loader来替换style-loader

// 1.引入
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  mode: "development",
  module: {
    rules: [
      // Less 配置
      {
        test: /\.less$/,
        // use: ["style-loader", "css-loader", "less-loader"],
        // 3. 替换style-loader
        use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
      },
      // Sass 配置
      {
        test: /\.scss$/,
        // use: ["style-loader", "css-loader", "sass-loader"],
        // 3. 替换style-loader
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
      // stylus 配置
      {
        test: /\.styl$/,
        // use: ["style-loader", "css-loader", "stylus-loader"],
        // 3. 替换style-loader
        use: [MiniCssExtractPlugin.loader, "css-loader", "stylus-loader"],
      },
    ],
  },
  // 2. 实例化插件
  plugins: [new MiniCssExtractPlugin()],
};

然后我们重新构建，可以发现，编译后的css会单独形成一个main.css文件。

最后我们在index.html文件中手动引入main.css就可以了。

<link rel="stylesheet" href="./dist/main.css" />

可能有些小伙伴觉得，自己每次手动引入js和css太麻烦，有没有自动引入的方式呢？这就需要用到html-webpack-plugin插件啦

自动引入js和css文件

首先安装

npm install html-webpack-plugin -D

然后在webpack.config.js使用该插件。

// 1.引入
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// 1.引入
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  // ...
  // 2. 实例化插件
  plugins: [
    new HtmlWebpackPlugin({
      // 模板html文件的位置，我们这里是在根目录下
      template: "./index.html",
    }),
    new MiniCssExtractPlugin(),
  ],
};

然后我们重新编译，可以看到在dist文件夹下多了index.html文件

并且该文件自动引入了我们构建后的js和css文件

自动清空打包目录

每次打包的时候，打包目录都会遗留上次打包的文件，为了保持打包目录的纯净，我们需要在打包前将打包目录清空

这里我们可以使用插件 clean-webpack-plugin 来实现。

老规矩，首先安装

npm install clean-webpack-plugin -D

然后在webpack.config.js使用该插件。

// 1.引入
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// 1.引入
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 1.引入
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  mode: "development",
  // 使用CleanWebpackPlugin需要显示定义出口，不然无效
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "./dist"),
  },
  // ...
  // 2. 实例化插件
  plugins: [
    new HtmlWebpackPlugin({
      // 模板html文件的位置，我们这里是在根目录下
      template: "./index.html",
    }),
    new MiniCssExtractPlugin(),
    new CleanWebpackPlugin(),
  ],
};

然后我们再次打包，可以发现，它会先将dist目录删除，然后重新生成dist目录。

css的前置处理器我们大致讲完了，接下来我们再来说说css的后置处理器。

css后置处理器PostCss

对于 PostCSS 官方的解释是： PostCSS 是一个允许使用 JS 插件转换样式的工具。 这些插件可以检查（lint）你的 CSS，支持 CSS Variables 和 Mixins， 编译尚未被浏览器广泛支持的先进的 CSS 语法，内联图片，以及其它很多优秀的功能。

笔者简单理解postcss 是 css 的 transpiler（转换编译器，简称转译器），它对于 css 就像 babel 对于 js 一样，能够做 css 代码的分析和转换。同时，它也提供了插件机制来做自定义的转换。

普通构建

我们这里拿autoprefixer插件来做例子来讲解。

创建项目

首先我们创建一个文件夹，然后初始化package.json文件。

// 创建webpacktest文件夹
mkdir postcsstest

// 进入postcsstest文件夹
cd postcsstest

// 创建package.json
npm init

创建源文件

因为我们要测试autoprefixer，所以我们需要找一个需要带浏览器前缀的样式。这个修改placeholder颜色的样式刚刚好。

安装 postcss、postcss-cli

单独使用postcss我们需要安装postcss、postcss-cli。这样我们就可以在命令行使用postcss命令了。

npm i postcss postcss-cli -D

安装插件

npm i autoprefixer -D

创建 postcss.config.js

postcss.config.js是postcss的配置文件，我们postcss的配置都需要在这里定义。

前面我们安装了autoprefixer插件，这里我们再来配置下。

// postcss.config.js

// 引入
const autoprefixer = require("autoprefixer");

module.exports = {
  // 使用
  plugins: [autoprefixer],
};

配置编译脚本

然后我们在package.json里面创建运行postcss的脚本

"scripts": {
  "pc1": "postcss src/post1.css -o dist/post1.css"
},

运行脚本

我们运行上面配置好的脚本来编译下，npm run pc1。当我们在命令行运行该命令时，其实真实运行的是postcss src/post1.css -o dist/post1.css，这样他会处理我们前面的post1.css。

看效果

我们来看下dist/post1.css，我们可以看到，它自动生成了-moz前缀的样式。

这里我们只拿autoprefixer作了讲解，其实截止到目前，PostCSS 有 200 多个插件。你可以在 插件列表找到它们。这些插件我们可以在不同需求下选择使用。

使用postcss-cli构建虽然可以，但是不推荐这么使用。一般我们都是使用webpack进行前端统一构建，所以下面笔者来说说使用webpack来构建我们的postcss

使用webpack构建

这里我们就不再单独创建项目了，我们基于前面预处理器的webpacktest项目。

创建源文件

我们把前面创建好的post1.css文件复制过来，并在入口文件index.js里面引入

安装 postcss-loader

在webpack里面使用postcss，我们只需要安装postcss-loader就可以了。

npm i postcss-loader -D

安装插件

npm i autoprefixer -D

创建 postcss.config.js

postcss.config.js是postcss的配置文件，我们postcss的配置都需要在这里定义。

前面我们安装了autoprefixer插件，这里我们再来配置下。

// postcss.config.js

// 引入
const autoprefixer = require("autoprefixer");

module.exports = {
  // 使用
  plugins: [autoprefixer],
};

配置webpack.config.js

我们在rules里面添加css的处理规则。并配置上postcss-loader。

module.exports = {
  mode: "development",
  module: {
    rules: [
      // css 配置
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      
      // ...
    ],
  },
};

修改index.html

我们在模板index.html里面添加一个input

运行脚本

接下来我们编译下，npm run webpack1。webpack会读取webpack.config.js文件，进行打包。

看效果

我们来看看编译后的代码，发现它也自动生成了-moz前缀的样式。

在页面上可以看到，我们input的placeholder的颜色被我们改成红色了。

好奇

为什么每次只生成了火狐浏览器的前缀-moz呢？不是还有ie浏览器前缀-ms，chrome浏览器前缀-webkit吗？

按理来说不应该是生成下面这些样式吗

这里就需要了解另外一个知识点了，那就是browserslist。

那这个browserslist到底是什么东西呢？

简单理解，browserslist 实际上就是声明了⼀段浏览器的集合，我们的⼯具可以根据这段集合描述，针对性的输出兼容性代码。

.browserslistrc文件的默认值是

> 0.5%
last 2 versions
Firefox ESR
not dead

所以，当我们不配置browserslist的话，它的配置就是上面的默认配置，所以并不会生成所有浏览器的前缀，只会针对性的输出。

如果想输出全部怎么办呢？我们可以做一个小测试，我们把not dead注释掉，再编译。

可以看到，编译后的文件里面有所有浏览器的前缀了。

我们除了定义.browserslistrc文件来配置browserslist外，我们还可以直接配置在package.json文件中，通过browserslist键来配置。

// package.json
{
  "browserslist": [
    "last 1 version",
    "> 1%",
    "IE 10"
  ]
}

现在对browserslist有了一个大概的了解了吧。

总结

好啦，看了上面的例子，小伙伴们应该很清楚css预处理器(PreCss)和css后置处理器(PostCss)了吧。

总的来说，css预处理器是用来弥补css不足的，它提供了变量、嵌套、复用、模块等方案，让我们的开发效率和开发体验大大提升。缺点是浏览器不能直接识别，每次上线前需要我们单独进行编译。

css后置处理器是用来处理css的，postcss 是 css 到 css 的转译器，它分为 parse、transform、generate 3个阶段。各种转换插件都是工作在 transform 阶段，基于 AST 做分析和转换。

系列文章

后记

感谢小伙伴们的耐心观看，本文为笔者个人学习笔记，如有谬误，还请告知，万分感谢！如果本文对你有所帮助，还请点个关注点个赞~，您的支持是笔者不断更新的动力！