const path = require("path");

const HtmlWebpackPlugin = require("html-webpack-plugin");

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

/*

    __dirname:当前文件夹的绝对路径

    path.join() 将第一个参数和第二个参数进行链接

*/

const PATH = {

    main:path.join(__dirname,"./src/index.js"),

    build:path.join(__dirname,"./build")

}

//下面的代码都是 webpack的配置项

module.exports = {

    entry:{

        //这里面的key值决定了下面name的名字叫什么

        main:PATH.main

    },

    output:{

        filename:"[name].js",//app.js

        path:PATH.build

    },

    mode:"development",

    //做模块的处理 用loader进行处理

    module: {

        rules:[

            {

                test:/\.jsx?$/,

                use:{

                    loader:"babel-loader",

                    options:{

                        presets:["@babel/env","@babel/react"]

                    }

                }

            },

            {

                test:/\.(css)$/,

                use:[

                    {

                        loader: MiniCssExtractPlugin.loader,

                        options: {

                            //publicPath: "/"

                        }

                    },

                    {

                        loader: "css-loader",

                        options: {

                            importLoaders: 1,

                            minimize: process.env.NODE_ENV == "production"

                        }

                    },

                    {

                        loader: "style-loader"

                    }

                ]

            },

            {

                test: /\.(jpe?g|png|gif|svg)/,

                use: {

                    loader: "url-loader",

                    options: {

                        limit: 1024,

                        outputPath: "images/",

                        name: "[name].[ext]"

                    }

                }

            },

            {

                test: /\.(eot|ttf|woff2?)/i,

                use: {

                    loader: "url-loader",

                    options: {

                        outputPath: "fonts/",

                        name: "[name].[ext]"

                    }

                }

            }

        ]

    },

    plugins:[

        new HtmlWebpackPlugin({

            filename:"index.html",

            template:"./index.html",

            hash: true

        }),

        new MiniCssExtractPlugin({

            filename: "css/[name].bundle.css",

            chunkFilename: "css/[name].chunk.css"

        })

    ],

    resolve: {

        extensions: [".js", ".jsx", ".json", ".css", ".html"]

    },

    devtool: "source-map",//该选项控制是否以及如何生成源映射。选择一种源映射样式，以增强调试过程。这些值可以显著地影响构建和重建速度。source-map之后你会发现你的 output 目录下多了一个 index.js.map 文件，此文件记录了sourceMap 行列信息如何映射源代码的信息

   devServer: {//访问本地静态文件

        compress: false,

        //contentBase: "./public",

        port: 8080,

        proxy: {

            "/": "http://localhost:3000"

        }

    }

}