一步步使用 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 编译完成。页面效果如下图：