webpack學習 配置babel js編譯器

以下是學習筆記:

1.babel的作用是將 新的es語法 轉化為瀏覽器能識別的語法(語法轉換)

1.1-安裝包

npm i -d babel-core babel-loader@7 

npm i -d babel-preset-env //env支援es6,es7,es8,相當於告訴babel處理要處理這些新的語法

1.2-配置babel

//

在module下rules中配置babel

1.3-在專案根目錄下新建.babelrc檔案,在裡面配置預設資訊

1.4-讓babel處理那些處於草案階段還未成為標準的語法

安裝包並配置

npm i -d babel-preset-stage-2

不是標準,配置stage-2就可以讓babel編譯草案階段還未成為標準的語法,只要能進入草案階段,幾乎就可以確定會成為標準

}

2.babel實現瀏覽器相容最新版es的api(transform-runtime或babel-ployfill)

以transform-runtime為例

npm i -d babel-plugin-transform-runtime

npm i -s babel-runtime

在.babelrc中配置

"plugins":[

"transform-runtime"]

學習記錄 Webpack的配置

3.webpack 中的載入器 webpack是乙個流行的前端專案構建工具 打包工具 可以解決當前web開發中所面臨的困境。webpack提供了友好的模組化支援，以及 壓縮混淆 處理js相容問題 效能優化等強大的功能，從而讓程式設計師把工作的重心放到具體的功能實現上，提高了開發效率和專案的可維護性。...

webpack學習筆記 配置plugins

plugin plugin 的配置很簡單，plugins 配置項接受乙個陣列，陣列裡每一項都是乙個要使用的 plugin 的例項，plugin 需要的引數通過建構函式傳入。const commonschunkplugin require webpack lib optimize commonschu...

webpack學習筆記 配置resolve

resolve resolve.alias 配置項通過別名來把原匯入路徑對映成乙個新的匯入路徑。例如使用以下配置 webpack alias 配置 resolve 當你通過 import button from components button 匯入時，實際上被alias等價替換成了 import...