webpack配置：增長babel支持、打包後調試

1、babel支持　　

　　Babel實際上是幾個模塊化的包，其核心功能位於稱爲babel-core的npm包中，webpack能夠把其不一樣的包整合在一塊兒使用，對於每個你須要的功能或拓展，你都須要安裝單獨的包（用得最多的是解析ES6的babel-preset-es2015包和解析JSX的babel-preset-react包）。

　　一、咱們先一次性安裝這些包，若是安裝出錯，小夥伴們能夠一個一個安裝。

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

　　二、在webpack.config.js中配置：

{ test:/\.(jsx|js)$/, use:{ loader:'babel-loader', options:{ presets:[ "es2015","react" ] } }, exclude:/node_modules/ }

　　三、能夠修改一下index.js的代碼

let hzhSrting = 'Hello Webpack!' document.getElementById('pic').innerHTML = hzhSrting;

　　而後webpack打包，npm run server 查看效果以下：

　　let 轉變成了 var，而且文字效果也出來了。

2、打包後調試

　　在配置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'