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能提供非常強大的處理功能，那哪些是模組呢。