webpack有什么用，webpack Babel

Babel

Babel其實是一個編譯JavaScript的平臺，它的強大之處表現在可以通過編譯幫你達到以下目的：

• 使用下一代的JavaScript代碼（ES6，ES7...），即使這些標準目前并未被當前的瀏覽器完全的支持；
• 使用基于JavaScript進行了拓展的語言，比如React的JSX；

• Babel的安裝與配置

  Babel其實是幾個模塊化的包，其核心功能位于稱為babel-core的npm包中，webpack可以把其不同的包整合在一起使用，對于每一個你需要的功能或拓展，你都需要安裝單獨的包（用得最多的是解析Es6的babel-preset-es2015包和解析JSX的babel-preset-react包）。

  我們先來一次性安裝這些依賴包

  // npm一次性安裝多個依賴模塊，模塊之間用空格隔開
  npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

• 在webpack中配置Babel的方法如下:

• module.exports = {entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
      output: {path: __dirname + "/public",//打包后的文件存放的地方filename: "bundle.js"//打包后輸出文件的文件名
      },devtool: 'eval-source-map',devServer: {contentBase: "./public",//本地服務器所加載的頁面所在的目錄historyApiFallback: true,//不跳轉inline: true//實時刷新
      },module: {rules: [{test: /(\.jsx|\.js)$/,use: {loader: "babel-loader",options: {presets: ["es2015", "react"]}},exclude: /node_modules/}]}
  };

  Babel的配置

  Babel其實可以完全在?webpack.config.js?中進行配置，但是考慮到babel具有非常多的配置選項，在單一的webpack.config.js文件中進行配置往往使得這個文件顯得太復雜，因此一些開發者支持把babel的配置選項放在一個單獨的名為 ".babelrc" 的配置文件中。我們現在的babel的配置并不算復雜，不過之后我們會再加一些東西，因此現在我們就提取出相關部分，分兩個配置文件進行配置（webpack會自動調用.babelrc里的babel配置選項），如下：

module.exports = {entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
    output: {path: __dirname + "/public",//打包后的文件存放的地方filename: "bundle.js"//打包后輸出文件的文件名
    },devtool: 'eval-source-map',devServer: {contentBase: "./public",//本地服務器所加載的頁面所在的目錄historyApiFallback: true,//不跳轉inline: true//實時刷新
    },module: {rules: [{test: /(\.jsx|\.js)$/,use: {loader: "babel-loader"},exclude: /node_modules/}]}
};

//.babelrc
{"presets": ["react", "es2015"]
}

webpack有什么用？?