深入淺出的webpack構建工具---PostCss(五)

龍恩0707發表於2018-08-14
WebCSS

一：PostCss是什麼？
  PostCss是一個樣式處理工具，它通過自定義的外掛和工具生態體系來重新定義css。它鼓勵開發者使用規範的css原生語法編寫程式碼，然後配置編譯器轉換需要相容的瀏覽器版本，最後通過編譯將原始碼轉換為目標瀏覽器可用的css程式碼。

它和stylus的不同之處是它可以通過外掛機制靈活地擴充套件其支援的特性，不像stylus的語法是固定的，它的用途非常多，比如css自動加字首，使用下一代css語法等等。

postcss官方有很多外掛，檢視外掛(https://github.com/postcss/postcss/blob/HEAD/README-cn.md), 下面我們先看下postcss在webpack構建配置，及分別講下常見的外掛的用法。

二：在webpack中使用postcss

比如我們使用stylus來編寫css程式碼，因此檔案就是這樣的檔案 檔名.styl了，因此該檔案需要依次經過stylus-loader, postcss-loader css-loader, style-loader編譯。因此需要如下配置：

{
  test: /\.styl$/,
  use: [
    {
      loader: 'style-loader',
      options: {}
    },
    {
      loader: 'css-loader',
      options: {}
    },
    {
      loader: 'postcss-loader',
      options: {}
    },
    {
      loader: 'stylus-loader',
      options: {}
    }
  ]
}

如上配置，所以要在webpack上配置上如上css的編譯器，因此我們需要安裝如上編譯器：如下命令：

npm install --save-dev style-loader css-loader postcss-loader stylus-loader

安裝完成後，我們就在webpack加上postcss配置，程式碼如下：

module.exports = {
  module: {
    rules: [
      {
        // 使用正則去匹配
        test: /\.styl$/,
        use: ExtractTextPlugin.extract({
          use: [
            {
              loader: 'style-loader',
              options: {}
            },
            {
              loader: 'css-loader',
              options: {}
            },
            {
              loader: 'postcss-loader',
              options: {}
            },
            {
              loader: 'stylus-loader',
              options: {}
            }
          ]
        })
      }
    ]
  }
}

在打包之前，我們還是看看我們專案整個目錄結構如下：

### 目錄結構如下：
demo1                                       # 工程名
|   |--- dist                               # 打包後生成的目錄檔案             
|   |--- node_modules                       # 所有的依賴包
|   |--- js                                 # 存放所有js檔案
|   | |-- demo1.js  
|   | |-- main.js                           # js入口檔案
|   |
|   |--- webpack.config.js                  # webpack配置檔案
|   |--- index.html                         # html檔案
|   |--- styles                             # 存放所有的css樣式檔案   
|   | |-- main.styl                         # main.styl檔案   
|   | |-- index.styl                        
|   |--- .gitignore  
|   |--- README.md
|   |--- package.json
|   |--- .babelrc                           # babel轉碼檔案

styles/main.styl 程式碼如下：

@import "./index.styl"; 
#app 
  font-size 18px
  width 200px
  height 200px
  display flex

styles/index.styl 程式碼如下：

body 
    font-size 12px

js/main.js 程式碼如下：

import '../styles/main.styl';

然後執行 打包命令 npm run dev 後，報如下錯誤：

因此我們這邊除了要安裝 stylus-loader 外，還需要把stylus包安裝；如下安裝命令：

npm install stylus --save-dev

安裝完成後，我們進行執行 npm run dev ，發下還是報錯了；如下所示：

提示 No PostCSS Config found 這樣的錯誤，通過百度搜尋，據說在專案中的根目錄下，新建一個 postcss.config.js 檔案，然後裡面新增一個如下簡單的程式碼即可：

module.exports = {};

然後我們再執行 npm run dev 後，接著又發下報如下錯誤：如下圖所示：

然後繼續搜尋答案，發現配置styl檔案配置貌似有問題，需要如下配置即可：

module.exports = {
  module: {
    rules: [
      {
        // 使用正則去匹配
        test: /\.styl$/,
        use: ExtractTextPlugin.extract({
          fallback: {
            loader: 'style-loader'
          },
          use: [
            {
              loader: 'css-loader',
              options: {
                
              }
            },
            {
              loader: 'postcss-loader',
              options: {}
            },
            {
              loader: 'stylus-loader',
              options: {}
            }
          ]
        })
      }
    ]
  }
}

再繼續執行程式碼就沒有報錯了。但是如上程式碼僅僅配置了postcss，但是並沒有使用內部的外掛，因此我們需要把對應的一些常用的外掛加上，比如 autoprefixer 自動新增字首，cssnano 壓縮css程式碼，postcss-cssnext css的下一代，使用css4的新語法等等。
目前先安裝這幾個外掛吧，如下命令安裝：

npm install --save-dev autoprefixer cssnano postcss-cssnext

現在webpack配置改為如下即可：

module.exports = {
  module: {
    rules: [
      {
        // 使用正則去匹配
        test: /\.styl$/,
        use: ExtractTextPlugin.extract({
          fallback: {
            loader: 'style-loader'
          },
          use: [
            {
              loader: 'css-loader',
              options: {
                
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                ident: 'postcss',
                plugins: [
                  require('autoprefixer')(),
                  require('postcss-cssnext')(),
                  require('cssnano')()
                ]
              }
            },
            {
              loader: 'stylus-loader',
              options: {}
            }
          ]
        })
      }
    ]
  }
}

配置如上完成後，我們繼續使用 npm run dev 打包，可以看到如下提示：

提示 postcss-cssnext 已經包含了 autoprefixer 外掛的功能，因此在webpack需要把 autoprefixer 去掉即可。因此我們繼續打包執行即可：如下圖所示：

在頁面上看下 main.css 程式碼如下：

這說明postcss通過外掛支援新增了相容性字首，並且可以使用那些尚未被瀏覽器所支援的css語法，比如變數,calc()等。這裡注意的是在使用postcss-cssnext時就不要使用autoprefixer外掛，因為postcss-cssnext包含了autoprefixer外掛。

三：postcss-pxtorem外掛將px轉換成rem
1. 要使用該外掛，首先需要安裝，如下命令：

npm install --save-dev postcss-pxtorem

2. 在webpack中整合 postcss-pxtorem， 如下程式碼配置：

module.exports = {
  module: {
    rules: [
      {
        // 使用正則去匹配
        test: /\.styl$/,
        use: ExtractTextPlugin.extract({
          fallback: {
            loader: 'style-loader'
          },
          use: [
            {
              loader: 'css-loader',
              options: {
                
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                ident: 'postcss',
                plugins: [
                  require('postcss-cssnext')(),
                  require('cssnano')(),
                  require('postcss-pxtorem')({
                    rootValue: 100,
                    propWhiteList: []
                  })
                ]
              }
            },
            {
              loader: 'stylus-loader',
              options: {}
            }
          ]
        })
      }
    ]
  }
}

如上程式碼配置 postcss-pxtorem 後，再執行 npm run dev 後，就可以看到如下圖所示，程式碼px已經轉換成rem了。

如上通過使用px編寫程式碼就能轉換成rem了，但是有時候我們並不想轉換，比如1px的邊框等等這樣的，我還是想使用px來表達的話，那麼我們可以把px寫成 Px 或 PX來解決，如下程式碼所示：

postcss-pxtorem 的具體配置如下所示：

require('postcss-pxtorem')({
  rootValue: 75,
  unitPrecision: 5,
  propList: ['*'],
  selectorBlackList: [],
  replace: true,
  mediaQuery: false,
  minPixelValue: 12
})

假設設計稿750寬;
rootValue為75，說是對根元素大小進行設定.
unitPrecision為5,是轉換成rem後保留的小數點位數.
selectorBlackList則是一個對css選擇器進行過濾的陣列，比如你設定為['fs']，那例如fs-xl類名，裡面有關px的樣式將不被轉換，
這裡也支援正則寫法。
minPixelValue的選項，我設定了12，意思是所有小於12px的樣式都不被轉換.
propList是一個儲存哪些將被轉換的屬性列表，這裡設定為['*']全部，假設需要僅對邊框進行設定，可以寫['*', '!border*']意思是排除帶有border的屬性.

四：postcss-sprites 雪碧圖的合併
1. 安裝命令如下：

npm install --save-dev postcss-sprites

2. 在webpack配置如下：

module.exports = {
  module: {
    rules: [
      {
        // 使用正則去匹配
        test: /\.styl$/,
        use: ExtractTextPlugin.extract({
          fallback: {
            loader: 'style-loader'
          },
          use: [
            {
              loader: 'css-loader',
              options: {
                
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                ident: 'postcss',
                plugins: [
                  require('postcss-cssnext')(),
                  require('cssnano')(),
                  require('postcss-pxtorem')({
                    rootValue: 100,
                    propWhiteList: []
                  }),
                  require('postcss-sprites')()
                ]
              }
            },
            {
              loader: 'stylus-loader',
              options: {}
            }
          ]
        })
      }
    ]
  }
}

如上postcss-sprites程式碼，我們再來測試下程式碼，如下main.styl程式碼如下：

@import "./index.styl"; 
#app 
  font-size 18px
  width 200px
  height 200px
  display flex
  border 1PX solid #ccc
  
.test1
  width 50%
  height 400px
  background url('../images/0001.png') no-repeat 0 0

.test2
  width 50%
  height 200px
  margin-top 20px
  background url('../images/0002.png') no-repeat 0 0

然後我們打包檔案後，main.css變為如下：

postcss所有外掛檢視（https://github.com/postcss/postcss/blob/HEAD/README-cn.md），可以根據自己的需要可以在專案中打包進去。

下面是所有的webpack.config.js 程式碼如下：

const path = require('path');
// 提取css的外掛
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ClearWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  entry: './js/main.js',
  output: {
    filename: 'bundle.js',
    // 將輸出的檔案都放在dist目錄下
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist'
  },
  mode: 'development',
  module: {
    rules: [
      {
        // 使用正則去匹配
        test: /\.styl$/,
        use: ExtractTextPlugin.extract({
          fallback: {
            loader: 'style-loader'
          },
          use: [
            {
              loader: 'css-loader',
              options: {}
            },
            {
              loader: 'postcss-loader',
              options: {
                ident: 'postcss',
                plugins: [
                  require('postcss-cssnext')(),
                  require('cssnano')(),
                  require('postcss-pxtorem')({
                    rootValue: 100,
                    unitPrecision: 5,
                    propWhiteList: []
                  }),
                  require('postcss-sprites')()
                ]
              }
            },
            {
              loader: 'stylus-loader',
              options: {}
            }
          ]
        })
      },
      {
        test: /\.(png|jpg)$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: '[name].[ext]'
        }
      },
      {
        test: /\.js$/,
        exclude: /(node_modules)/, // 排除檔案
        loader: 'babel-loader'
      }
    ]
  },
  resolve: {
    // modules: ['plugin', 'js']
  },
  externals: {
    jquery: 'jQuery'
  },
  devtool: 'source-map',
  devServer: {
    // contentBase: path.join(__dirname, "dist"),
    port: 8081,
    host: '0.0.0.0',
    headers: {
      'X-foo': '112233'
    },
    // hot: true,
    inline: true,
    // open: true,
    overlay: true,
    stats: 'errors-only'
  },
  plugins: [
    // new ClearWebpackPlugin(['dist']),
    new ExtractTextPlugin({
      // 從js檔案中提取出來的 .css檔案的名稱
      filename: `main.css`
    })
  ]
};

package.json 變為如下：

{
  "name": "demo1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --progress --colors --devtool cheap-module-eval-source-map --hot --inline",
    "build": "webpack --progress --colors --devtool cheap-module-source-map"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-2": "^6.24.1",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^1.0.0",
    "cssnano": "^4.0.5",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^1.1.11",
    "path": "^0.12.7",
    "postcss-cssnext": "^3.1.0",
    "postcss-loader": "^3.0.0",
    "postcss-pxtorem": "^4.0.1",
    "postcss-sprites": "^4.2.1",
    "style-loader": "^0.21.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "uglifyjs-webpack-plugin": "^1.2.7",
    "url-loader": "^1.0.1",
    "webpack": "^4.16.1",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "http-proxy-middleware": "^0.18.0",
    "jquery": "^3.3.1"
  }
}

 

相關文章