const { resolve } = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
    // 檔案起始點從 entry 進入，因為是陣列所以也可以是多個檔案
    entry: [
        'react-hot-loader/patch',
        // 開啟react程式碼的模組熱替換（HMR）
 

        'webpack-dev-server/client?http://localhost:8080',
        // 為webpack-dev-server的環境打包好執行程式碼
        // 然後連線到指定伺服器域名與埠
        'webpack/hot/only-dev-server',
        // 為熱替換（HMR）打包好執行程式碼
        // only- 意味著只有成功更新執行程式碼才會執行熱替換（HMR）
        './index.js'
        // 我們app的入口檔案
    ],
    // output 是放入產生出來的結果的相關引數
    output: {
        path: resolve(__dirname, 'dist'
 
),
        filename: 'bundle.js',
        publicPath: '/'
        // 對於熱替換（HMR）是必須的，讓webpack知道在哪裡載入熱更新的模組（chunk）
    },
    context: resolve(__dirname, 'src'),

    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader:'babel-loader',
                },
                exclude: /node_modules/
 

            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader',
                ],
            },
        ],
    },
    devtool: 'inline-source-map',
    // devServer 則是 webpack-dev-server 設定
    devServer: {
        hot: true,
        // 開啟伺服器的模組熱替換（HMR）
        contentBase: resolve(__dirname, 'dist'),
        // 輸出檔案的路徑
        publicPath: '/'
        // 和上文output的"publicPath"值保持一致
    },

    // plugins 放置所使用的外掛
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        // 開啟全域性的模組熱替換（HMR）
        new webpack.NamedModulesPlugin(),
        // 當模組熱替換（HMR）時在瀏覽器控制檯輸出對使用者更友好的模組名字資訊
        // new CleanWebpackPlugin(['dist']),

        // new HtmlWebpackPlugin({
        //     title: 'Development'
        // })
    ],

};