什麼是 PostCSS 與 autoprefixer

PostCSS 是個以 JavaScript 轉換 CSS 的工具套件，可搭配 autoprefixer 加入瀏覽器的前綴 (prefix) 處理，像是 -webkit-、 -moz-、 -ms-、 -o-。

在撰寫 CSS 時就不用手動加入前綴，透過工具來自動處理。

安裝 PostCSS 與 autoprefixer

npm 安裝 PostCSS 與 autoprefixer ，安裝指令如下

webpack 4 所使用 PostCSS 版別：postcss-loader 官方版號 v3.0.0

建立與設定 postcss.config.js

建立 postcss.config.js 加入插件 autoprefixer 與設定

要使用 PostCSS 需要有 postcss.config.js 設定檔，建立 postcss.config.js 檔，這也是 postcss-loader 官方所推的方法。

建立 postcss.config.js 檔後，加入以下內容

執行 webpack 後會出現下面提示內容

主要的問題是 postcss.config.js 檔裡的 browsers: [] 的屬性名稱，將名稱改成
overrideBrowserslist: []，就可修正以上的提示訊息。

PostCSS 設定是使用 module.exports = {} 裡面帶 plugins: [] 透過 require('autoprefixer')({}) 來設定 autoprefixer，透過這 postcss.config.js 裡的設定方式。

PostCSS 使用外掛 autoprefixer 針對瀏覽器相容性設定

這樣可以讓 PostCSS 透過 plugins: [] 裡引入 autoprefixer，而 autoprefixer 裡面處理的是瀏覽器相容前綴的處理 ( browsers: [])。

autoprefixer 的 browsers: [] 設定透過 Can I use 的規範內容，判斷要不要加上相關的前綴詞。
相關設定的細節可以參考 browserslist GibHub 的文件來設定，需要另外設定額外的規則在貼入或修改。

autoprefixer 官方版號 v9.8.6

webpack.config.js 的 loader 轉 css 檔設定

前往 webpack.config.js 檔中的 module.exports = {} 下面的 module: { rules: [] } 裡的 use: extractCSS.extract([]) 多加入 'postcss-loader' 的設定，修改後如下。

使用 loader 的順序是由後往前，所以處理的過程會先將引入的 CSS 透過 postcss-loader 的 autoprefixer 加上前綴 (prefix) 處理後，才接著往下個流程 css-loader 進行處理。
css-loader 解析完成後，最後交由 extractCSS.extract() 產生出 [name].css 的檔案。

執行 webpack 編譯處理前綴 (prefix) 後產出 css 檔

以上設定完成後，在終端機上輸入指令 npm run watch 會先由注入點 import 引用 css 檔產處理後的 .css 檔，以 index.js 來正常沒問題的話會直接產生 .css 檔在，原先所使用的 css 在 dist/css/index.css 路徑下。

但原先使用的 css 程式碼中，沒有需要加入前綴，所以另外加上 box-shadow 的 css 屬性樣式。

在編譯完成後的路徑 dist/css/index.css 路徑，會見到在 box-shadow 的上面一行，又加上一行的 -webkit-box-shadow: css 程式碼。

這樣的方式配合上前面的設定，只需要在原本的 css 檔中撰寫一次就好，而剩下的前綴 (prefix) 會透過工具自動加入與處理。