一步步使用 webpack 第二篇：使用 webpack 编译 PostCSS 代码

前言

在上一篇文章中，完成 webpack 的基础配置就可以完成 es6 的编译，本篇文章介绍如何使用 webpack 完成 PostCSS 的编译。

想要了解 PostCSS 常用插件与语法介绍，点击这里查看。

版本说明

本文使用的 webpack 的版本为：4.30.0

开始配置

组件安装

首先使用命令行完成 css loader 的安装：

$ cnpm install --save-dev style-loader css-loader

然后安装 postcss-loader :

$ cnpm install postcss-loader --save-dev

安装 PostCSS 最常用的组件 precss：

$ cnpm install precss --save-dev

创建 CSS 文件

在 ./src/css 文件夹下创建 style.css 文件：

webpack-es6
  |- /dist
    |- index.html
  |- /src
    |- index.js
    |- css
        |- style.css

webpack 配置 css 处理规则

在 webpack.config.js 文件添加 CSS 的处理规则：

const path = require('path');
module.exports = {
    entry: './src/index.js',
    output:{
        filename:'index.js',
        path:path.resolve(__dirname,'dist')
    },
    // 以下代码为新添加的代码
    module:{
        rules:[
            {
                test: /\.css$/, // 匹配所有以 .css 结尾的文件，然后通过以下的 loader 进行处理
                use:[
                    'style-loader',
                    'css-loader',
                    'postcss-loader'
                ]
            }
        ]
    }
    // 以上代码为新添加的代码
};

配置 PostCSS

项目目录下新建 postcss.config.js 文件，在配置文件中引入我们安装的 precss 插件：

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

配置完成

以上就完成了 webpack 打包 PostCSS 的配置，此时的文件目录如下：

webpack-postcss
    |- node_modules
    |- /dist
        |- index.html
    |- /src
        |- css
            |- style.css
        |- index.js
    |- package.json
    |- package-lock.json
    |- postcss.config.js
    |- webpack.config.js

添加代码

接下来我们添加代码测试配置是否成功。

文件 ./dist/index.html 添加代码：

<p><span>PostCSS</span>编译成功</p>

文件 ./src/css/style.css 添加代码：

$color_index: 1; // precss 的变量定义语法
P{
    color: red;
    span{
        @if $color_index == 1{ // precss 的判断语法
            color: blue;
        }@else{
            color: green;
        }
    }
}

文件 ./src/index.js 添加代码：

import './css/style.css'; // 将 css 引入到 webpack 的入口 js 文件

编译程序

运行命令行

$ npm run build

打开 index.html ，如果页面中 PostCSS 文字的颜色为蓝色，则说明 PostCSS 编译完成。页面效果如下图：

总结

PostCSS 支持嵌套规则和循环语句等未来 css 语法，还可以将 添加浏览器前缀 这些繁琐的工作交给了程序处理，让我们的心思都集中在代码逻辑上，会让开发的过程轻松不少；
想要了解 PostCSS 常用插件与语法介绍，点击这里查看；
webpack 配置 PostCSS 的过程并不复杂，简单的配置就可以使用到更多的 CSS 语法，何乐而不为呢。下一步使用 webpack 管理图片等资源文件。

参考链接

webpack 中文网：www.webpackjs.com/