如何配置webpack讓瀏覽器自動補全首碼

一、postcss-loader有什麼用?

　　PostCSS 本身是一個功能比較單一的工具。它提供了一種方式用 JavaScript 代碼來處理 CSS。它負責把 CSS 代碼解析成抽象語法樹結構（Abstract Syntax Tree，AST），再交由插件來進行處理。插件基於

CSS 代碼的 AST 所能進行的操作是多種多樣的，比如可以支持變數和混入（mixin），增加瀏覽器相關的聲明首碼，或是把使用將來的 CSS 規範的樣式規則轉譯（transpile）成當前的 CSS 規範支持的格式。從這

個角度來說，PostCSS 的強大之處在於其不斷發展的插件體系。

　　在webpack4. 的配置裡面，切記版本不同，postcss-loader的配置會有相應的變化。我們要使用瀏覽器自動補全工具首先要安裝 postcss-loader並配合autoprefixer插件。

（1）首先將兩個必要插件安裝到本地依賴。

npm i postcss-loader autoprefixer -D

 (2) 在 webpack 中配置 module，

module：{
     test: /\.less$/, use: [
         'style-loader'
         'css-loader',
         'postcss-loader',
         'less-loader',
     ]
}

 (3) 創建 postcss.config.js文件

module.exports = {
    plugins: [
        require('autoprefixer')({
            overrideBrowserslist: [
              "Android 4.1",
              "iOS 7.1",
              "Chrome > 31",
              "ff > 31",
              "ie >= 8",
              "> 1%", // 必須大於 1% 用戶使用的瀏覽器
              //'last 2 versions', // 所有主流瀏覽器最近的 2個版本
          ],
          grid: true
        })
    ]
}

　　當

當然還有另外一種配置 postcss-loader 的方式

　　在 package.json 文件 加：

"browserslist": [
  "defaults",
  "not ie < 11",
  "last 2 versions",
  "> 1%",
  "iOS 7",
  "last 3 iOS versions"
],

　　然後 創建 postcss.config.js

module.exports = {
    plugins: [
        require('autoprefixer')()
    ]
}

相信到這裡你就會使用 瀏覽器自動補全工具啦