一步步使用 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/

更多文章

• 查看 網易創意部 其餘小夥伴的文章：github.com/f2e-netease…
• 查看個人更多文章：github.com/NalvyBoo/bl…