https://blog.csdn.net/boysky0015/article/details/71450603

webpack-使用babel-loader轉化ES6程式碼

在webpack.config.js中需要配置以下程式碼：

module: {
    loaders: [
        {
            test: /\.js$/,
            loader: 'babel-loader',
            option: {
                'presets': [latest],
            }
        }
   ]
}
 

然後必須安裝babel-loader

npm install --save-dev babel-loader babel-core

• 1

因為配置了presets 
所以需要在命令列安裝

npm install --save-dev babel-preset-latest

https://blog.csdn.net/zhanglongdream/article/details/53875320

.babelrc檔案的一些簡單的配置

首先現在根目錄先生存.babelrc檔案

這個檔案是用來設定轉碼的規則和外掛的

如果想使用es6語法，必須安裝外掛

npm install babel-preset
 
-es2015

{"presets":["es2015"]}

什麼是.babelrc檔案呢？ 熟悉linux的同學一定知道，rc結尾的檔案通常代表執行時自動載入的檔案，配置等等，類似bashrc,zshrc

而且在babel6中，這個檔案必不可少。

  裡面可以對babel命令進行配置，以後再使用babel的cli的時候，可以少一些配置。

    還有一個env欄位，可以對BABEL_ENV或者NODE_ENV指定的不同的環境變數，進行不同的編譯操作

"presets"

   這個是babel6新加的，就是代表需要啟動什麼樣的預設轉碼，在babel中，預設了6中，分別是

   es2015  ,stage-0 , stage-1 ,stage-2 , stage-3 ,react

require hook

 require hook 的作用就是替換原來的require，以便在自動載入對程式碼進行編譯執行

 其實這個做的便是重寫require.extensions 中對應的副檔名的載入程式，並且預設會判斷這個檔案是否是 node_modulesz中的模組。，如果是的

話，那麼將不會進行轉換。否則的話進行轉換

基本的格式就是

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

presets 欄位是用來設定轉碼規則，，具體看官方的   https://babeljs.io/docs/plugins/

先下載所要使用的轉碼規則 外掛 然後將其寫到  .babelrc檔案 中

presets 其實就是一堆plugins的預設起到了方便的作用 如果不採用 presets 完全可以單獨引用某個功能 

{
  "presets": ["es2015", "stage-2"],
  "plugins": ["transform-runtime"],
  "comments": false
}

一種簡單的使用方式