[Day17] Webpack - 跨浏览器支援

讲到浏览器，脑中浮现的通常是 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. 完成後就可以测试是否成功了。