webpack與babel的深奧，渣渣的我只能作個小筆記（持續更新）

最近公司封裝的構建庫用多了，感受本身正在一步一步的變傻，因此趁還沒下雪，手腳還沒長凍瘡，沒事仍是本身折騰一下吧。
本想記筆記，但沒想到記筆記無法傳圖片。因此若是你看到了，就忽略了吧。o(╥﹏╥)o o(╥﹏╥)o o(╥﹏╥)o

思來想去，我入門webpack已經好多年了，之前寫到過一篇：webpack再入門,說一下那些不入流的知識點，但從沒深刻過，但願此次能堅持下去，將webpack與babel好好深刻一番。

webpack4官網：地址
babel官網： 地址

webpack相關

• 1.

在項目中，嘗試着用antd的組件，而後引入了antd的css樣式，而後報了個以下的錯，這種錯誤拋出來，簡直讓你懷疑人生，由於你就在js中寫了一句 import 'antd/dist/antd.css'。每天都在用的模式，怎麼，怎麼就報錯了呢？

緣由：本身在loader裏配上了各類高大上的loader，什麼sass,less，file,可是就是沒有配css（哭暈在廁所）
解決辦法：加上唄。

敲黑板： loader順序與解析值得關注，loader的編譯順序是從右往左依次執行，以less類型爲例，當編譯器遇到a.less時，先經過less-loader將a.less編譯爲一個一個的css模塊，而後再經過css-loader將其整合爲一個css模塊（懷疑中，還須要探索）。可是還須要一個地方去引入這個css，通常前面緊跟style-loader，但這個loader會把整個css經過style標籤注入到HTML中，和這個時代主流有點不符合。因此這裏我用了MiniCssExtractPlugin這個插件，它的做用是將css做爲一個文件經過link標籤引入。

• 2.

webpack4.27.1的文檔中提到了公共代碼分離提到了webpack.optimize.CommonsChunkPlugin，可是添加了運行後報錯：
webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead
緣由: 官方文檔有一點滯後，須要修正吧，索性官方仍是提供了splitChunks的使用說明，
解決辦法：照着文檔慢慢整吧。不過我發現裏面的知識點仍是挺多的，什麼aysnc,initial,all這幾個的區別。

Babel篇

• 1.

同一臺電腦，webpack-dev-server在同一個端口啓動第二個服務，會報：Error: listen EADDRINUSE xxxx端口錯誤

解決辦法：能夠在啓動服務器，使用net庫檢測該端口是否已經被佔用。

• 2.

使用了對象展開運算符，Babel編譯報Unexpected token，如圖：

緣由:babel只配置了env，ES6中提出了展開運算符，但這個展開僅僅對數組展開（es2015-spread），而對象展開（object-rest-spread）如今還只是一個提案。
解決辦法： 安裝（babel-plugin-transform-object-rest-spread）並在babelrc添加"plugins": [ "transform-object-rest-spread" ]

• 3.

babel加了個支持async await的插件後報錯TypeError: Falsy value found in plugins。baben 配置以下：

緣由： .babelrc中plugins中的空字符串去掉(讓人啼笑皆非o(╥﹏╥)o的錯誤)
解決辦法：去掉空字符串

-4.
想用一些超級語法，那就是必然會付出代價。接着上面async await講，雖然加了插件編譯成功，但在運行時，會報： ReferenceError: regeneratorRuntime is not defined。具體試驗代碼以下所示：

async function async1() {
      console.log('async1 start');
      await async2();
      console.log('async1 end');
    }
    
    async function async2() {
      console.log('async2');
    }
    async1();

緣由：雖然chrome是支持es6語法的，但babel-preset-env並非支持全部es6語法的編譯。也就是說問題並非出在async await語法的編譯上（transform-async-to-generator），而是錯在env沒有對生成器語法的支持。若是有疑問,能夠直接拷貝下列代碼到瀏覽器中運行：

function* create() {
        let fir = yield 1;
        let sec = yield fir + 2;
        yield sec;
    }
    const iter = create();
    console.log(iter.next());

因此咱們還須要增長babel對生成器語法的支持，就是加上babel-plugin-transform-runtime這個插件就ok了。
解決方法：安裝babel-plugin-transform-runtime插件，並在.babelrc中plugins中的transform-async-to-generator以後加上transform-runtime支持。

敲黑板: .babelrc配置中的Plugin/Preset排序，官方說的很清楚了，我以爲我沒有必要再扯犢子了，看圖：

後面再加一句：我在babel上對這個排序還有點疑惑，由於我調整了順序，並無什麼影響。o(╥﹏╥)o
-5.
‘The decorators plugin requires a decoratorsBeforeExport option’，裝了個babel7，而後用箭頭函數在react中聲明瞭一個靜態方法，而後曝出了上面所示的錯誤，這確實是專屬於babel 7的，
解決方法：如上圖所示，加配置legacy: true