webpack 項目構建：（二）ES6 編譯環境搭建

注：如下教程均在 windows 環境實現，使用其餘操做系統的同窗實踐過程可能會有些出入。

  在上一章 webpack 項目構建：（一）基本架構搭建 咱們搭建了一個最基本的 webpack 項目，如今讓咱們以此爲基礎，結合 babel，構建一個能夠運行最新 ES6 語法的 webpack 項目。

1、上期回顧

  在上一章，咱們搭建了一個以下結構的 webpack 項目：

  並經過 webpack.config.js 的 entry 和 output 屬性，配置了 webpack 的打包規則：

webpack.config.js

  即以當前目錄下的 index.js 爲打包入口，經過 webpack 打包構建，在當前目錄生成一個 test.js 文件。經過簡單的配置就能讓 webpack 正常工做了。
  如今經過在當前目錄執行 webpack 打包命令，咱們就能獲得 test.js 文件了。

2、使用打包生成的 test.js 文件

  第一章中 index.js 文件作的事情很簡單，僅僅是聲明瞭一個值爲整型 123 的 test 變量。

index.js

  在實際的環境中，這樣一段代碼完成的功能頗有限。如今讓咱們來擴展咱們的項目，使之能完成更強大的功能。

1. 修改 index.js 文件，完成等待 1 秒彈出問候語的功能：
   index.js
   
2. webpack 打包生成 test.js 文件；
3. 新建 index.html 文件，並引用打包生成的 test.js 文件：
   index.html
   

  如今讓咱們在瀏覽器裏打開 index.html 文件，等待一秒就會彈出信息爲 Hello word! 的彈窗。因而可知打包生成的 test.js 具備 index.js 同樣的功能。
  這是由於 webpack 打包的本質，就是從入口文件出發，遞歸解析全部相關的依賴文件，並打包成一個或多個文件（bundle）。webpack 只是從新組織、精簡了你寫的代碼，並不會影響代碼的功能。webpack 的魅力也正是在於其強大的組織、優化代碼的能力。如今讓咱們一步步地深刻了解 webpack 的打包配置，一點點揭開 webpack 神祕的面紗。

3、ES6 和 Babel

  ECMAScript6 實現了不少強大的新特性，藉助 ES6 咱們能用更加優雅的方式完成許多強大的功能。只是鑑於許多老版本的瀏覽器還沒有支持 ES6 語法，須要在使用以前轉換爲 ES5 語法，以使其兼容更多的瀏覽器。而完成這些轉換工做的就是 Babel 了。
  Babel 本質就是一個 JavaScript 編譯器，經過：

1. 將 JavaScript 源代碼解析成抽象語法樹（AST）；
2. 將源代碼的 AST 結果一系列轉換生成目標代碼的 AST；
3. 將目標代碼的 AST 轉換成 JavaScript 代碼。

  就能夠完成 ES6 代碼到 ES5 代碼的轉換，固然轉換的過程會很複雜，咱們在這裏先了解一下基本的原理。想深刻了解的同窗能夠經過開發本身的 Babel Plugin，熟悉 AST 的操做流程。

  Babel 自己的安裝使用是很簡單的，針對咱們當前的應用，咱們能夠經過以下過程實現：

1. 安裝 babel-core 包：cnpm i --save-dev babel-core；
2. 新建一個 Babel 測試文件 babelTest.js 並使用 babel-core 轉換 ES6 代碼（咱們使用了 ES6 的箭頭函數）：
   babelTest.js
   
3. 安裝上一步中使用的 babel-preset-env 和 babel-preset-stage-0 包：cnpm i --save-dev babel-preset-env babel-preset-stage-0；（babel-preset-env 是一個主流的 Babel 插件數組；Stage-X 是實驗階段的 Presets，）
   TC39 將提案分爲如下幾個階段:
   Stage 0 - 稻草人: 只是一個想法，多是 babel 插件。
   Stage 1 - 提案: 初步嘗試。
   Stage 2 - 初稿: 完成初步規範。
   Stage 3 - 候選: 完成規範和瀏覽器初步實現。
   Stage 4 - 完成: 將被添加到下一年度發佈。
4. 在當前目錄執行 babelTest.js 文件：node babelTest.js，控制檯輸出信息：
   
   能夠看到咱們的 ES6 箭頭函數被轉換爲了 ES5的 '(function() {})'。

  瞭解了 Babel 的基本工做原理，如今讓咱們用 ES6 的新特性，稍微改寫一下咱們的 index.js：

index.js

  在這裏咱們用了 ES6 的模板字符串和箭頭函數。模板字符串經過用反引號（`）標識字符串，能夠看成普通字符串使用，也能夠用來定義多行字符串，或者在字符串中嵌入變量。
  在沒有配置 Babel 的狀況下，咱們經過 webpack 命令打包，能夠發現生成的 test.js 文件仍是用的 ES6 語法：

test.js

注：截圖部分是 test.js 的最後參數部分。

  下面讓咱們看一下如何將 Babel 結合到 webpack 中，來實現 ES6 代碼到 ES5 代碼的轉換。

4、webpack + Babel 構建 ES6 開發平臺

  既然要將 webpack 和 Babel 結合在一塊兒，就須要在二者之間創建一條紐帶，而經過 webpack 的 loaders 就能夠生成這條紐帶，如今讓咱們修改咱們的 webpack.config.js 配置文件：

webpack.config.js

  能夠看到咱們在這裏加了一段 module.rules 配置項，rules 數組裏的每一項就是一條 loader 使用規則，loader 用於對不一樣類型文件的源代碼進行轉換，可使你在 import 或"加載"模塊時預處理文件。
  如今咱們配置的第一條規則，就是針對以 .js 結尾的文件使用 babel-loader。因爲如今咱們的項目中還不存在 babel-loader，讓咱們先經過 cnpm 安裝該模塊： cnpm i --save-dev babel-loader。

  如今咱們已經準備好了 webpack、webpack 和 Babel 的紐帶，接下來就須要準備 Babel 的相關配置了。
  在上一節已經介紹了單獨使用 Babel 的實現方法，可是在 webpack 中通常狀況下咱們不會主動調用 babel-core 解析 ES6 代碼，而是經過 babel-loader 在 webpack 編譯過程當中自動解析 ES6 代碼。那麼如今的問題就是在上一節使用 babel-core 的過程當中，咱們使用了 env 和 stage-0 兩個 preset，如今不使用 babel-core 了，這兩個 preset 又應該在哪裏配置？
  這裏咱們有兩種方式能夠實現上述配置：

1. 使用 Babel 提供的方法：經過 Babel 目錄下的 .babelrc 配置文件完成配置（直接建立 .babelrc 文件可能會有命名規範的問題，能夠經過 VS Code、Sublime 等編輯器建立該文件）。這裏的 .babelrc 就相似於 webpack.config.js 的做用，只是 .babelrc 文件是在 babel-loader 執行的過程當中使用的。
   .babelrc
   
2. 使用 webpack 提供的方法：在 webpack.config.js 的 module.rules 規則中，咱們還能夠經過使用 loader 語法配置 Babel 的 presets：
   webpack.config.js
   

  咱們採用第一種方式配置 .babelrc 文件，項目目錄結構以下：

  如今讓咱們在當前目錄下執行 webpack 命令並查看生成的 test.js 文件，能夠發現咱們的 index.js 已經被轉換成 ES5 代碼了：

  在瀏覽器中打開咱們的 index.html，發現打包出來的 test.js 能正常工做：

  使用 webpack 搭建 ES6 編譯環境就講完了。下一章咱們開始搭建一個 webpack 開發環境。（webpack 項目構建：（三）開發環境——本地服務器搭建）

源碼下載地址：https://github.com/xh4722/web...

參考資料：
ECMAScript 6入門（阮一峯）
babel-handbook
webpack 中文文檔
Babel中文網