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等等。這只是個人觀點，如果有不足，還請多指教。如果想了解更多，請掃描下面的二維碼：