Webpack进阶第四节

Babel其实可以完全在webpack.config.js中进行配置，但是考虑到babel具有非常多的配置选项，在单一的webpack.config.js文件中进行配置往往使得这个文件显得太复杂，因此一些开发者支持把babel的配置选项放在一个单独的名为‘.babelrc’的配置文件中。我们现在的babel的配置并不复杂，不过之后我们会加一些东西，因此我们现在就提取出相关部分，分两个配置文件进行配置(webpack会自动调用.babelrc里的配置选项)如下：

webpack.config.js文件如下：

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文件

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

到目前为止，我们已经知道了，对于模块，Webpack能提供非常强大的处理功能，那哪些是模块呢。