一、babel支持
Babel其實是幾個模塊化的包，其核心功能位於稱為babel-core的npm包中，webpack可以把其不同的包整合在一起使用，對於每一個你需要的功能或拓展，你都需要安裝單獨的包（用得最多的是解析ES6的babel-preset-es2015包和解析JSX的babel-preset-react包）。
1、我們先一次性安裝這些包，如果安裝出錯，小伙伴們可以一個一個安裝。
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
2、在webpack.config.js中配置：
{ test:/\.(jsx|js)$/, use:{ loader:'babel-loader', options:{ presets:[ "es2015","react" ] } }, exclude:/node_modules/ }
3、可以修改一下index.js的代碼
let hzhSrting = 'Hello Webpack!' document.getElementById('pic').innerHTML = hzhSrting;
然后webpack打包，npm run server 查看效果如下：
let 轉變成了 var，並且文字效果也出來了。
二、打包后調試
在配置devtool時，webpack給我們提供了四種選項。
（1）source-map：在一個單獨文件中產生一個完整且功能完全的文件。這個文件具有最好的source map，但是它會減慢打包速度。
（2）cheap-module-source-map：在一個單獨的文件中產生一個不帶列映射的map，不帶列映射提高了打包速度，但是也使得瀏覽器開發者工具只能對應到具體的行，不能對應到具體的列（符號），會對調試造成不便。
（3）eval-source-map：使用eval打包源文件模塊，在同一個文件中生產干凈的完整版的sourcemap，但是對打包后輸出的JS文件的執行具有性能和安全的隱患。在開發階段這是一個非常好的選項，在生產階段則一定要不開啟這個選項。
（4）cheap-module-eval-source-map：這是在打包文件時最快的生產source map的方法，生產的 Source map 會和打包后的JavaScript文件同行顯示，沒有映射列，和eval-source-map選項具有相似的缺點。
四種打包模式，由上到下打包速度越來越快，不過同時也具有越來越多的負面作用，較快的打包速度的后果就是對執行和調試有一定的影響。個人意見是，如果大型項目可以使用source-map，如果是中小型項目使用eval-source-map就完全可以應對，需要強調說明的是，source map只適用於開發階段，上線前記得修改這些調試設置。
簡單的配置下：
devtool:'eval-source-map'
