由於ES6語法在各個瀏覽器上支援的情況各不相同，所以在使用ES6語法時需要使用babel經過一次編譯，將ES6語法編譯為ES5語法，下面就開始搭建一個基於webpack+babel的ES6語法執行環境：

1.需要安裝的包

• webpack(安裝webpack，必裝)
• babel-loader和babel-core(babel轉碼器，必裝)
• babel-preset-es2015(轉碼規則，以es2015規則轉碼，必裝)
• webpack-dev-server(瀏覽器熱更新使用，選裝)

可以使用下面一條命令快速安裝：

cnpm install babel-loader babel-core
 
 babel-preset-es2015 webpack webpack-dev-server --save-dev

2.目錄結構說明

D:\ES6-ENV
│ .babelrc
│ index.html
│ package.json
│ webpack.config.js
│
├─dist
├─node_modules
└─src
      └─ main.js

1.ES6-ENV: 專案名
2..babelrc:babel的配置檔案
3.index.html:訪問的頁面
4.webpack.config.js:webpack配置檔案
5.dist:webpack打包後的輸出檔案
6.src/main.js:編寫es6程式碼檔案

3.babel配置檔案.babel

{
  "presets":[
      "es2015"
  ],
  "plugins":[]
}

4.webpack配置檔案webpack.config.js

var path = require('path');

module.exports = {
  //入口檔案
  entry:'./src/main.js',
  //出口檔案
  output:{
    filename:'bundle.js',                   //出口檔名
    path: path.resolve(__dirname,'dist')    //出口檔案路徑
 

  },
  module:{
    rules:[
      {
        test:/\.js$/,
        use:[
          {
            loader:'babel-loader'
          }
        ],
        exclude: [
        //排除的不轉換node_modules下面的.js檔案
          path.resolve(__dirname, 'node_modules')
        ]
      }
    ]
  }
}

5.package.json

{
  "name": "es6-env",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --port 8080 --inline --hot --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.11.0"
  }
}

6.執行

npm run dev