一覆劈、babel
babel可以將高版本的js代碼轉(zhuǎn)換為低版本的js代碼，從而達到兼容舊瀏覽器（比如IE）的目的沛励。一些ES6的類和方法责语，比如Promise，babe會通過低版本js可以運行的方法重新實現(xiàn)目派，然后在代碼中使用坤候。

1. 安裝babel

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

其中，@babel/core是babel的核心工具庫企蹭。
@babel/preset-env是babel的預(yù)置環(huán)境白筹，這個包里預(yù)置了很多環(huán)境，比如谷歌某版本谅摄、IE某版本徒河、火狐某版本等，設(shè)置了什么版本送漠，babel編譯的時候就相應(yīng)的編譯成什么樣的js顽照。
babel-loader是babel在webpack中的加載器，用來將babel和webpack關(guān)聯(lián)起來闽寡。
core-js是模擬js運行環(huán)境的代碼代兵，提供了es5、es6的polyfills爷狈，包括promises植影、symbols、collections涎永、iterators思币、typed arrays、ECMAScript 7+ proposals羡微、setImmediate等等支救。core-js里面東西很多，在實際配置的時候拷淘，會按需選擇一部分使用各墨。

2.如何使用

// webpack.config.js
// 首先在rules里加上babel對ts文件的處理
{
                // test指定的是規(guī)則生效的文件
                test: /\.ts$/,
                // 要使用的loader
                use: [
                    // 配置babel
                    {
                        loader: 'babel-loader',
                        options: {
                            // 設(shè)置預(yù)置環(huán)境
                            presets: [
                                [
                                    // 指定環(huán)境的插件
                                    "@babel/preset-env",
                                    // 配置信息
                                    {
                                        // 要兼容的瀏覽器版本
                                        targets: {
                                            "chrome": "58",
                                            "ie": "11"
                                        },
                                        // 指定corejs的版本
                                        "corejs": "3",
                                        // 使用corejs的方式 usage表示按需加載
                                        "useBuiltIns": "usage"
                                    }
                                ]
                            ]
                        }
                    },
                    'ts-loader'
                ],
                // 要排除的文件
                exclude: /node_modules/
                // 這塊配置的意思是，使用ts-loader處理所有以.ts結(jié)尾的文件启涯，但排除掉node_modules文件夾
            }

我們修改了對ts文件的處理規(guī)則贬堵，之前只用到ts-loader恃轩，這次加上了babel-loader，當(dāng)use屬性中有多個loader的時候黎做，可以通過數(shù)組的方式傳入叉跛，loader如果沒有特殊配置，寫入名字即可蒸殿，比如上面的ts-loader筷厘。如果有更詳細的配置，可以傳入一個對象宏所，比如上面的babel-loader酥艳。

需要注意的是：use中配置的loader是按照從后往前的順序執(zhí)行的，在上面配置中爬骤，首先通過ts-loader將ts轉(zhuǎn)為js（js版本由tsconfig.json指定）充石，然后通過babel將js轉(zhuǎn)換為可兼容的js代碼。

3. 測試

// index.ts
const fn = (a:number, b:number) => a + b
fn(123, 456)

npm run build編譯后霞玄，打開bundle.js

編譯后的文件

在引入es6的Promise試試

// index.ts
const fn = (a:number, b:number) => a + b
fn(123, 456)
console.log(Promise)

編譯后的文件大了很多惫企，里面自己實現(xiàn)了promise

4. bug
   到這里补鼻，我們得到的bundle.js按理說應(yīng)該可以支持到IE瀏覽器了，但實際卻發(fā)現(xiàn)報錯了
   執(zhí)行npm run start啟動項目雅任，在IE瀏覽器中打開风范，打開控制臺，發(fā)現(xiàn)報錯了沪么。
   
   IE瀏覽器報錯
   
   定位到錯誤的位置看看
   
   報錯位置
   
   我們發(fā)現(xiàn)webpack打包的js硼婿，包裹在一個立即執(zhí)行函數(shù)中，而這個函數(shù)里面禽车，是一個箭頭函數(shù)寇漫。IE不支持箭頭函數(shù)，所以在最開始就報錯了殉摔。
   這里有點疑問州胳，我們不是用babel把js給轉(zhuǎn)成舊版本js了嗎，上面的例子中逸月，箭頭函數(shù)也被轉(zhuǎn)成普通函數(shù)了栓撞，這里為什么會有一個箭頭函數(shù)呢？

實際上，這里的箭頭函數(shù)瓤湘，是webpack的代碼瓢颅，而babel處理的是我們自己寫的代碼，所以它處理不到這塊弛说⊥炫常可以看出webpack并不喜歡IE，默認不想支持它木人。所以應(yīng)該怎么解決呢信柿？

在webpack配置的output對象中，增加一個配置醒第，告訴webpack不要使用箭頭函數(shù)以及const（不設(shè)置這個渔嚷，在IE10瀏覽器中會因為const而報錯）。

output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        // 告訴webpack不使用箭頭函數(shù)和const
        environment: {
            arrowFunction: false淘讥，
            const: false
        }
    }

在啟動下用IE打開圃伶，發(fā)現(xiàn)沒有報錯了堤如。
以上蒲列，關(guān)于babel的配置就告一段落了。
二搀罢、postcss

1. 安裝

npm i -D less less-loader css-loader style-loader

less-loader是less的加載器蝗岖。
css-loader是用來進行css的模塊化處理的。如果在JS中導(dǎo)入了css榔至，那么就需要使用css-loader來識別這個模塊抵赢，通過特定的語法規(guī)則進行轉(zhuǎn)換內(nèi)容最后導(dǎo)出，css-loader會處理import / require()以及 @import / url引入的內(nèi)容唧取。
style-loader是處理css的最終引用的铅鲤，它在前面的包整理好引用關(guān)系后，在編譯好的html中枫弟，通過js創(chuàng)建style標(biāo)簽邢享，里面包含了css樣式。

除了安裝這些淡诗，還要安裝postcss骇塘，postcss之于css，就像babel之于js韩容，它可以將css轉(zhuǎn)換為更具兼容性的寫法款违。

npm i -D postcss postcss-loader postcss-preset-env

整體捋一下這些包的使用順序：

• 用less文件寫樣式
• 編譯的時候webpack首先使用less-loader加載less文件，并將less代碼轉(zhuǎn)換成css代碼
• 使用postcss-loader群凶，根據(jù)配置將css代碼轉(zhuǎn)成更具兼容性的css代碼
• css-loader處理引用關(guān)系插爹，知道應(yīng)該在什么地方引入哪些css代碼
• style-loader通過js創(chuàng)建style標(biāo)簽，根據(jù)前面的引用關(guān)系请梢，在合適的地方加入css代碼

2. 如何使用

// webpack.config.js 在module --> rules中指定less文件的加載規(guī)則
// 設(shè)置less文件的處理
            {
                test: /\.less$/,
                use: [
                    "style-loader",
                    "css-loader",
                    // 引入postcss
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                plugins: [
                                    [
                                        "postcss-preset-env",
                                        {
                                            browsers: 'last 2 versions'
                                        }
                                    ]
                                ]
                            }
                        }
                    },
                    "less-loader"
                ]
            }

配置方法和babel類似递惋，plugins中指定了postcss的預(yù)置環(huán)境柔滔，以及兼容性要求為支持每種瀏覽器的最新的兩個版本。

3. 測試
   在src中創(chuàng)建styles/index.less文件

body {
  background: red;
  display: flex;
}

在index.ts中引用這個css
import './styles/index.less'
編譯后打開bundle.js萍虽，搜索flex

編譯后的bundle.js

經(jīng)過兩節(jié)時間杉编，webpack的配置已經(jīng)告一段落超全，后面章節(jié)將逐步實現(xiàn)貪吃蛇的小游戲。