重構之路 webpack配置es6語法

之前已經寫好了最簡單的乙個webpack配置，並且已經可以執行js了，但是，新時代的前端肯定要寫es6啊，但是我們在index.js裡寫上es6的語法時，比如：

//使用es6裡的set和擴充套件運算子來實現陣列去重

varset
=new
set([1
,2,2
,3,3
,4,4
,5,5
]);console.
log(
[...
set]);
//[1,2,3,4,5]
//順便寫乙個一行**實現陣列去重，這個也算個面試題了
[...
newset([
1,2,
2,3,
3,4,
4,5,
5])]
//[1,2,3,4,5]

預設情況下babel可以將箭頭函式，class等語法轉換為es5相容的形式，但是卻不能轉換map，set，promise等新的全域性物件，這時候就需要使用polyfill去模擬這些新特性

yarn add @babel/polyfill @babel/runtime //注意這裡不加-d

yarn add @babel/plugin-transform-runtime -d

}]

}

import "@babel/polyfill" //新增這一行

var set=new set([1,2,2,3,3,4,4,5,5]);
console.log([...set]);

上面我們還新增了runtime外掛程式，這個外掛程式後期可以和@babel/preset-env實現按需載入，所以這裡先配置了。

（ps：我們在後面的章節會說如何去優化包體積的）

然後我們開啟index.html頁面，在ie下變成了下面這樣，我們就完成了配置es6的語法

重構之路 開始配置webpack

現在開始建立專案了，安裝node什麼的一大堆我就不說了，網上很多，我這裡使用的是node版本v10.15.0，yarn的版本是v1.12.3。首先在建立的目錄下面執行 yarn init y yarn add webpack webpack cli d 我這裡使用的版本是webpack4.29.0，...

重構之路 開始配置webpack

現在開始建立專案了，安裝node什麼的一大堆我就不說了，網上很多，我這裡使用的是node版本v10.15.0，yarn的版本是v1.12.3。首先在建立的目錄下面執行yarn init yyarn add webpack webpack cli d我這裡使用的版本是webpack4.29.0，然後在...

webpack學習之路之webpack核心概念

webpack相關文件 webpack官網 webpack中文官網 webpack github位址 webpack 版本差異及修復bug webpack 主要4個核心概念 1 entry entry是某一段 的入口，這段 入口會告訴webpack 裡面有哪些模組的依賴。entry也是打包的入口，告...