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