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

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

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

webpack相關(guān)

• 1.

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

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

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

• 2.

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

Babel篇

• 1.

同一臺(tái)電腦，webpack-dev-server在同一個(gè)端口啟動(dòng)第二個(gè)服務(wù)，會(huì)報(bào)：Error: listen EADDRINUSE xxxx端口錯(cuò)誤

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

• 2.

使用了對(duì)象展開(kāi)運(yùn)算符，Babel編譯報(bào)Unexpected token，如圖：

原因:babel只配置了env，ES6中提出了展開(kāi)運(yùn)算符，但這個(gè)展開(kāi)僅僅對(duì)數(shù)組展開(kāi)（es2015-spread），而對(duì)象展開(kāi)（object-rest-spread）現(xiàn)在還只是一個(gè)提案。
解決辦法： 安裝（babel-plugin-transform-object-rest-spread）并在babelrc添加"plugins": [ "transform-object-rest-spread" ]

• 3.

babel加了個(gè)支持async await的插件后報(bào)錯(cuò)TypeError: Falsy value found in plugins。baben 配置如下：

原因： .babelrc中plugins中的空字符串去掉(讓人哭笑不得o(╥﹏╥)o的錯(cuò)誤)
解決辦法：去掉空字符串

-4.
想用一些超級(jí)語(yǔ)法，那就是必然會(huì)付出代價(jià)。接著上面async await講，雖然加了插件編譯成功，但在運(yùn)行時(shí)，會(huì)報(bào)： 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語(yǔ)法的，但babel-preset-env并不是支持所有es6語(yǔ)法的編譯。也就是說(shuō)問(wèn)題并不是出在async await語(yǔ)法的編譯上（transform-async-to-generator），而是錯(cuò)在env沒(méi)有對(duì)生成器語(yǔ)法的支持。如果有疑問(wèn),可以直接拷貝下列代碼到瀏覽器中運(yùn)行：

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

所以我們還需要增加babel對(duì)生成器語(yǔ)法的支持，就是加上babel-plugin-transform-runtime這個(gè)插件就ok了。
解決方法：安裝babel-plugin-transform-runtime插件，并在.babelrc中plugins中的transform-async-to-generator之后加上transform-runtime支持。

敲黑板: .babelrc配置中的Plugin/Preset排序，官方說(shuō)的很清楚了，我覺(jué)得我沒(méi)有必要再扯犢子了，看圖：

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

總結(jié)

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

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