webpacak將ES6轉ES5

webpack將es6轉換成es5

webpack 是支持es6的模塊的寫法的，但是當前的瀏覽器不支持，所以想要將用es6方式寫的模塊代碼在瀏覽器運行起來，要先使用webpack進行打包

babel

es6的一個編譯器，這個東西有自己的獨立的運行功能 可以下載 babel-cli,來進行es6的代碼轉換工作！

babel+webpack

1. 下載需要的依賴包，命令如下

npm install babel-loader babel-core -D

1. 新建一個webpack.config.js文件，配置loader

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

3.我們需要創建一個.babelrc文件，配置.babelrc (因爲babel-core需要使用到這個配置文件)

presets： babel在進行代碼轉換的時候，需要遵守一些規則，這些規則有現成的，
babel-preset-es2015
babel-preset-stage-0
babel-preset-stage-1
babel-preset-stage-2
babel-preset-stage-3

上面的這些都不需要再用了，只需要一個即可
babel-preset-env

需要先下載

npm install babel-preset-env -D

配置方式一：
{
    presets: [
    "env"
    ]
}

配置方式二：
{
  "presets": [
    ["env", {
      "targets": {
    "browsers": ["last 2 versions", "safari >= 7"]
      }
    }]
  ]
}

1. 執行webpack 進行打包即可（webpack全局安裝）！

webpack本地安裝之後如何執行

webpack官方推薦本地安裝

npm install webpack -D

本地安裝之後如何運行

1. package.json中的scripts
   我們可以在package.json中的scripts屬性中配置一些相應的shell命令

   想要運行這些配置好的命令的時候，只需要 npm run 指令的名稱

   運行命令的時候，npm會自動啓動一個shell，將這些命令內容作爲shell腳本來使用， 這個shell的path中會自動加入我們當前項目中的 ./node_modules/.bin/

2. 如果想要在本地安裝後執行webpack

{
    scripts: {
        "dev": "webpack"
    }
}

3.直接用npm run dev命令運行