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"]
}