Webpack實戰（七）：簡單搞懂PostCSS的用法及與一些插件的用法

不知不覺地春節要來臨了，今天已是放假的次日，想一想回老家以後全部的時間就不是本身的了，要陪孩子玩，走親戚等等，我仍是趁着在鄭州的這兩天，把幾天後春節要發佈的文章給提早整整。在此，提早祝你們春節快樂！！

前面我已寫了6篇相關的Webpack方面的技術知識點，今天我主要分享有關PostCSS方面的技術,PostCSS嚴格來講不是一款c s s預處理器，而是一個用 JavaScript 工具和插件轉換 CSS 代碼的工具。它的工做模式是接收樣式源代碼並交由編譯插件處理，最後輸出CSS。經過PostCSS包含的不少功能強大的插件，可讓咱們使用更新的CSS特性，保證更好的瀏覽器兼容性。

PostCSS特色

1. 支持將來的css, 使用cssnext書寫將來的css
2. 編譯速度有了很大的提高
3. 豐富的插件系統
4. c s s能夠模塊化

### PostCSS在Webpack中的用法

使用npm 進行安裝postcss-loader,postcss-loader是鏈接PostCSS和Webpack。安裝命令行以下：

npm install postcss-loader --save-dev

webpack.config.js配置以下：

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
  context: path.join(__dirname, './src'),
  entry: {
    index: './index.js'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [{
          loader: MiniCssExtractPlugin.loader,
          options: {
            publicPath: './dist'
          },
        }, 'css-loader'], // "css-loader" 將 CSS 轉化成 CommonJS 模塊
        exclude: /node_modules/
      },
      {
        test: /\.scss$/i,
        use: ['style-loader',
        {
          loader: 'css-loader',
          options: {
            sourceMap: true
          }
        },
        {
          loader: 'sass-loader',
          options: {
            sourceMap: true
          }
        },
        'postcss-loader'  //配置postcss-loader
        ], 
        exclude: /node_modules/
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
            presets: [
              [
                'env', {
                  modules: false
                }
              ]
            ]
          }
        }
      }
    ],
  },
  plugins: [new MiniCssExtractPlugin({
    filename: '[name].css',
    chunkFilename: '[id].css'
  })],
}

postcss-loader能夠結合css-loader使用，也可單獨使用，就是單獨使用也能夠達到須要的效果，可是單獨使用的時候不建議用css中的@import語法，不然會產生冗餘代碼。官方推薦是二者結合着使用，不要單獨使用。

postcss與Autoprefixer

postCSS必須有一個單獨的配置文件，因此還須要在項目根目錄下配置一個postcss.config.js，
這個能夠結合着自動添加前綴插件Autoprefixer使用，Autoprefixer 自動獲取瀏覽器的流行度和可以支持的屬性，並根據這些數據幫你自動爲 CSS 規則添加前綴。這是postCss最普遍的一個應用場景。首先安裝Autoprefixer，安裝命令代碼以下：

npm install autoprefixer  --save-dev

在postcss.config.js中添加autoprefixer,配置代碼以下：

const autoprefixer = require('autoprefixer')
module.exports = {
  parser: 'sugarss',
  plugins: {
    'autoprefixer': {
      flex: true,
      browsers: [
        '> 1%',
        'last 3 versions',
        'android 4.2',
        'ie 8'
      ]
    }
  }
}

咱們能夠在autoprefixer中添加須要支持的特性（如grid）以及兼容哪些瀏覽器（browsers）。配置好以後，咱們就可使用一些較新的CSS特性。如：

.main{
dislay: grid;
}

因爲配置中制定grid爲true,也就是grid特性添加ie前綴，通過編譯後變成：

.main{
display: -ms-grid;
dislay: grid;
}

### postcss 與cssnext

postcss能夠與cssnext 結合使用，這樣能夠在應用中使用最新的CSS的語法特性。
首頁使用npm 命令行安裝：

npm install postcss-cssnext --save-dev

而後在posts.config.js中添加相應的配置，代碼以下：

const postcssCssnext = require('postcss-cssnext')
module.exports = {
  parser: 'sugarss',
  plugins: {
    'postcssCssnext': {

      browsers: [
        '> 1%',
        'last 2 versions'
      ]
    }
  }
}

指定好須要支持的瀏覽器以後，咱們就能夠順暢地使用CSSNext的特性了。PostCSS會幫咱們把CSSNext的語法翻譯爲瀏覽器能接受的屬性和形式。好比下面的代碼：

/** main.css **/
:root {
    --highligtColor: hwb(190, 35%, 20%);
}
body {
    color: var(--highlightColor)
}

打包後編譯的效果以下：

body {
    color: rgb(89, 185, 204)
}

postcss 與stylelint

stylelint是一個css代碼質量檢測的工具，咱們能夠爲其添加各類規則，來統一項目的代碼風格，來確保代碼質量高。
首頁先用命令行安裝stylelint代碼以下：

npm install stylelint --save-dev

postcss.config.js配置代碼以下：

const stylelint = require('stylelint')
module.exports = {
  plugins: {
    'stylelint': {
      config: {
        rules: {
          'declaration-no-important': true
        }
      }
    }
  }
}

這裏咱們添加了declaration-no-important這樣一條規則，當咱們的代碼中出現了「！important」時就會給出警告。好比下面的代碼：

/** a.scss**/
$base-color: red;

html {
  body{
    color: $base-color !important;
  }
}

打包效果以下圖：

能夠看出給出警告。
使用stylelint能夠檢測出代碼中的樣式問題（語法錯誤、重複的屬性等），幫助咱們寫出更加安全而且風格更加一致的代碼。

CSS Modules

CSS Modules 模塊化是css的全局的終結者，就是說你永遠不用擔憂命名太大衆化而形成衝突，只要用最有意義的名字就好了。
css 模塊化是近幾年比較流行的一種開發模式，讓css跟其餘開發語言同樣，具備本身的模塊做用域，讓css也擁有模塊化的特色：

• 每一個CSS文件中的樣式都擁有單獨的做用域，不會和外界發生命名衝突。
• 對CSS進行依賴管理，能夠經過相對路徑引入CSS文件。
• 能夠經過composes輕鬆複用其餘CSS模塊。

使用CSS Modules 不須要額外安裝其餘組件，只須要配置css-loader便可。
配置web pack.config.js配置以下：

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
  context: path.join(__dirname, './src'),
  entry: {
    index: './index.js'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', {
          loader: 'css-loader',
          options: {
            modules: {
              localIdentName: '[path][name]__[local]--[hash:base64:5]',
            }
          }
        }]
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
            presets: [
              [
                'env', {
                  modules: false
                }
              ]
            ]
          }
        }
      }
    ],
  }
}

咱們只須要配置modules.localIdentName配置便可

• [name]指代的是模塊名，這裏被替換爲style。
• [local]指代的是本來的選擇器標識符，這裏被替換爲title。
• [hash：base64：5]指代的是一個5位的hash值，這個hash值是根據模塊名和標識符計算的，所以不一樣模塊中相同的標識符也不會形成樣式衝突。
  cs s代碼以下：

/** style.css**/
.tit {
  color: #ff0000;
}

// index.js
import style from  './style.css';
document.write(`<p class="${style.tit}">hello webpack2</p>`);

編譯後發現代碼成了一個class爲.style__tit--Vp6X7，之前我在j s中引入c s s文件，直接import引入便可，不須要定義一個名稱，可是這個c s s modules 引入c s s的時候須要定義一個對象，而後再引用，最終這個HTML中的class才能與咱們編譯後的CSS類名匹配上。
運行效果如圖：

總結：

今天與你們分享的主要是postcss相關的，主要包括到postcss與webpack結合使用，autoprefixer自動添加前綴，stylelint檢測代碼，css modules等等。這只是我的觀點，若是有不足，還請多指教。若是想了解更多，請掃描下面的二維碼：