Bebal

Babel其实是一个编译Javascript的平台，它可以编译代码帮你达到以下目的：

• 让你能使用最新的Javascript代码（ES6,ES7…）,而不管新标准是否被当前使用的浏览器完全支持；
• 让你能使用基于Javascript进行了扩展的语言，比如React的JSX；

Babel的安装与配置：
**
Bebal其实是几个模块化的包，其核心功能位于称为babel-core的npm包中，webpack可以把其不同的包整合在一起使用，对于每一个你需要的功能或扩展，你都需要安装单独的包（用的最多的是解析ES6的babel-env-preset包和解析JSX的babel-preset-react包）。

npm install —save-dev babel-core babel-loader babel-preset-env babel-preset-react

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: [
                            "env", "react"
                        ]
                    }
                },
                exclude: /node_modules/
            }
        ]
    }
};

Babel的配置：

Babel其实可以完全在webpack.config.js中进行配置。但是考虑到babel具有非常多的配置选项，在单一的webpack.config.js文件中进行配置往往使这个文件显得太复杂，因此一些开发者支持把babel的配置选项放在一个单独的名为“.babelrc”的配置文件中。(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", "env"]
}