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

            }

       }

    }

}