講到瀏覽器，腦中浮現的通常是 Google Chrome、IE(Edge)、FireFox、Safari...等較常見的瀏覽器，光是這些台灣的主流瀏覽器對『前端 3 寶』的支援度就有些差異，更不用說其他較不常見的瀏覽器，今天就來學習如何讓 Webpack 具備支援多瀏覽器的神力。

瀏覽器支援清單 - BrowsersList

在開發前，可以先確定要支援的瀏覽器種類，並且使用 BrowsersList 這個插件來定義在專案內。

1. 方法 1 - 編輯 package.json 加入設定(以下設定內容僅供參考)

   "browserslist": [
     "defaults"
   ] 
   

2. 方法 2 - 新增.browserslistrc檔案，獨立出一個設定檔

   defaults
   

3. 撰寫方式可以參考BrowsersList的文件。

4. 完成設置後，可以透過指令查看支援了哪些瀏覽器和版本。

   $ npx browserslist
   

為 CSS 加上前綴－PostCSS

有些瀏覽器的 CSS 屬性需要加上前綴詞才能生效（特別是 CSS 3 以後的屬性，例如：-webkit、-moz...，要人工加上這些前綴費時費力，PostCSS 像 Webpack 一樣是多功能的套件，但是專精在 css 後處理，可以把新的語法轉成舊的寫法，也能自動加上前綴來支援各種瀏覽器。

1. 安裝 postcss-loader 和 PostCSS

   $ npm i -D postcss-loader postcss
   

2. 編輯 webpack.config.js，修改 css 的 loader 配置：

   • 原本的 css-loader 改成物件格式，並新增屬性來引入其他 loader
   • 新增 postcss-loader

   module.exports = {
     module: {
       rules: [
         {
           test: /\.css$/i,
           use: [
             {
               loader: 'css-loader',
               options: {
                 importLoaders: 1,
               }
             },
             {
               loader: "postcss-loader",
             },
           ],
         },
       ],
     },
   };
   

3. 新增檔案 postcss.config.js，並且寫入要使用的功能，這邊先加入自動補上前綴的功能。

   plugins: [
     require('autoprefixer')
   ]
   

4. 安裝 autoprefixer

   $ npm i -D autoprefixer
   

5. 完成安裝後就可以測試是否成功了。

JS轉譯－Bable

PostCSS 提供 CSS 的加工處理，Bable 則是專職 JavaScript 的處理，可以把一些較新的語法轉成舊的寫法來支援無法解析的瀏覽器（例如：ES6 的箭頭函式轉成 ES5 的寫法）。

1. 安裝 Babel Loader和相關套件。

   npm i -D babel-loader @babel/core @babel/preset-env
   

2. 編輯 webpack.config.js，在 module裡面新增一個 rules物件。

   module: {
     rules: [
       {
         test: /\.m?js$/,
         exclude: /node_modules/,
         use: {
           loader: 'babel-loader',
         }
       }
     ]
   }
   

3. 設定 babel

• 方法１：修改 webpack.config.js 的 rules，來加入設定。

  loader: 'babel-loader',
  options: {
    presets: [
      ['@babel/preset-env']
    ]
  }
  

• 方法２：新增組態設定檔 babel.config.json 來獨立撰寫設定。

  {
    "presets": ["@babel/preset-env"]
  }
  

4. 完成後就可以測試是否成功了。