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