webpack的基本配置項

const path = require("path");

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

const PATH = {

     app:path.join(__dirname,"./src/mian.js"),//設置入口文件

     build:path.join(__dirname,"./dist")//設置出口文件

}

 

module.exports = {

 

    entry:{

        app:PATH.app//匹配入口文件的名字

    },

     output:{//匹配出口文件的配置

        filename:"[name].js",

        path:PATH.build

    },

//配置須要打包的模塊

module:{

    rules:[//規則是一個數組，主要是放你須要打包的模塊，使用什麼打包

        {

        test:/\.(css|scss)$/,

        use:["style-loader","css-loader","sass-loader"]

        },

        {

        test:/\.(js|jsx)$/,

        use:{

        loader:"babel-loader",

//將ES6的代碼轉換爲ES5的代碼

         options:{

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

        }

        },

    exclude:__dirname+"./node_modules"//排除不用打包的文件夾

        }

    ]

},

//插件的使用

plugins:[

    new HtmlWebpackPlugin({

        filename:"index.html",//使用這個插件，能夠實現文件名和渲染的文件以及ejs渲染等配置

        template:"index.html",

        title:"react"

    })

],

devServer:{//跨域

    proxy:{

    "/v3":{

        target:"https://mall.api.epet.com",

        changeOrigin:true

            }

       }

    }

}