webpack的基本配置项

时间:2023-12-31 13:46:08
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
            }
       }
    }
}