【ES6】使用Babel轉換ES6為ES5，套件使用：webpack、babel-core、babel-loader、babel-preset-env、glob

//步驟一
npm init

（後面加-y就可以直接跳到最後一步）

//步驟二
npm i webpack -D

（-D等同於--save-dev）

//步驟三
npm i babel-core -D

//步驟四
npm i babel-loader -D

//步驟五
npm i glob -D

//步驟六

新增一個檔案webpack.config.js
並引入套件glob
然後設定export的物件，其中包含entry、output、module(以及他的loaders屬性)、watch

//步驟七

編輯入口entry，使用glob module的sync方法來指定src資料夾裡面的所有js檔
然後新增一個src資料夾

//步驟八

編輯輸出output，指定輸出(打包)到build資料夾的index.js檔案中，
並新增一個build資料夾

//步驟九

為loaders陣列增加第一個物件
其屬性test指定作用js檔案
其exclude屬性指定排除作用到node_module資料夾
其loader屬性指定到babel-loader

//步驟十

補安裝漏安裝的babel-preset-env

npm i babel-preset-env -D

然後去webpack.config.js裡面設定options屬性
設定presets屬性為一個陣列，其中含有一個字串為env

//webpack.config.js

var glob = require('glob');

module.exports = {
    entry: {
        js: glob.sync('./src/*.js')
    },
    output: {
        filename: './build/index.js'
    },
    module: {
        loaders:[
            {
                test:/\.js$/,
                exclude:/node_modules/,
                loader:'babel-loader',
                options:{
                    presets:['env']
                }
            }
        ]
    },
    watch:true
}

//步驟十一

回package.json去設定scripts，並新增start指令，指定啟動webpack

npm start

下完指令後，並會在你存檔(變更檔案時)，啟動loader
src資料夾中寫ES6語法的檔案，就會被打包轉譯成ES5加入到build資料夾的index.js檔案中

//package.json
{
  "name": "0219",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start":"webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "glob": "^7.1.2",
    "webpack": "^3.11.0"
  }
}

補充

斜線包起來的部分是正規表示法區塊，
\.是跳脫字元來指定小數點
$錢字號是「.js」這個字串，是否符合驗證字串的結束位置
（所以是true的話才會被babel-loader編譯）

//正規表示法
/\.js$/