最近公司封裝的構(gòu)建庫用多了，感覺自己正在一步一步的變傻，所以趁還沒下雪，手腳還沒長凍瘡，沒事還是自己折騰一下吧。
本想記筆記，但沒想到記筆記沒法傳圖片。所以如果你看到了，就忽略了吧。o(╥﹏╥)o o(╥﹏╥)o o(╥﹏╥)o

思來想去，我入門webpack已經(jīng)好多年了，以前寫到過一篇：webpack再入門,說一下那些不入流的知識點(diǎn)，但從沒深入過，希望這次能堅持下去，將webpack與babel好好深入一番。

webpack4官網(wǎng)：地址
babel官網(wǎng)： 地址

webpack相關(guān)

• 1.

在項(xiàng)目中，嘗試著用antd的組件，然后引入了antd的css樣式，然后報了個如下的錯，這種錯誤拋出來，簡直讓你懷疑人生，因?yàn)槟憔驮趈s中寫了一句 import 'antd/dist/antd.css'。天天都在用的模式，怎么，怎么就報錯了呢？

原因：自己在loader里配上了各種高大上的loader，什么sass,less，file,但是就是沒有配css（哭暈在廁所）
解決辦法：加上唄。

敲黑板： loader順序與解析值得關(guān)注，loader的編譯順序是從右往左依次執(zhí)行，以less類型為例，當(dāng)編譯器遇到a.less時，先通過less-loader將a.less編譯為一個一個的css模塊，然后再通過css-loader將其整合為一個css模塊（懷疑中，還需要探索）。但是還需要一個地方去引入這個css，一般前面緊跟style-loader，但這個loader會把整個css通過style標(biāo)簽注入到HTML中，和這個時代主流有點(diǎn)不符合。所以這里我用了MiniCssExtractPlugin這個插件，它的作用是將css作為一個文件通過link標(biāo)簽引入。

• 2.

webpack4.27.1的文檔中提到了公共代碼分離提到了webpack.optimize.CommonsChunkPlugin，但是添加了運(yùn)行后報錯：
webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead
原因: 官方文檔有一點(diǎn)滯后，需要修正吧，索性官方還是提供了splitChunks的使用說明，
解決辦法：照著文檔慢慢整吧。不過我發(fā)現(xiàn)里面的知識點(diǎn)還是挺多的，什么aysnc,initial,all這幾個的區(qū)別。

Babel篇

• 1.

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

解決辦法：可以在啟動服務(wù)器，使用net庫檢測該端口是否已經(jīng)被占用。

• 2.

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

原因:babel只配置了env，ES6中提出了展開運(yùn)算符，但這個展開僅僅對數(shù)組展開（es2015-spread），而對象展開（object-rest-spread）現(xiàn)在還只是一個提案。
解決辦法： 安裝（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講，雖然加了插件編譯成功，但在運(yùn)行時，會報： ReferenceError: regeneratorRuntime is not defined。具體試驗(yàn)代碼如下所示：

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沒有對生成器語法的支持。如果有疑問,可以直接拷貝下列代碼到瀏覽器中運(yùn)行：

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上對這個排序還有點(diǎn)疑惑，因?yàn)槲艺{(diào)整了順序，并沒有什么影響。o(╥﹏╥)o
-5.
‘The decorators plugin requires a decoratorsBeforeExport option’，裝了個babel7，然后用箭頭函數(shù)在react中聲明了一個靜態(tài)方法，然后曝出了上面所示的錯誤，這確實(shí)是專屬于babel 7的，
解決方法：如上圖所示，加配置legacy: true

總結(jié)

以上是生活随笔為你收集整理的webpack与babel的深奥，渣渣的我只能做个小笔记（持续更新）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。