webpack 配置

const HTMLPlugin = require('html-webpack-plugin')
module.exports = {
    mode: 'development', //设置打包模式 development 开发模式 production 生产模式
    entry: './src/index.js', //用来指定打包时得主文件 默认 ./src/index.js
    // entry: ['./src/a.js', './src/b.js'], //可以传递数组，将多个文件打包成一个文件
    // entry: {
    //     a: './src/a.js',
    //     b: './src/b.js',
    // }, //传递对象 将多个文件打包成多个文件 打包后得文件名为对应得键名
    output: {  //配置代码打包后得地址
        filename: 'index.js', // 打包后得文件名 如果entry入口文件里有多个文件时，设置只有filename可以定义一个变量名 [name].js 也可以加id和hash等值 [name]-[id]-[hash].js
        clean: true, // 是否自动清理打包目录
        path: path.resolve(__dirname, 'hello'), // 指定打包得目录 必须是绝对路径
    },
    /*
        webpack默认情况下，只会处理js文件，如果希望它可以处理其他类型得文件，则要为其引入loader
        以css为例：
            使用css-loader 可以处理js中的样式
            使用步骤
            1、安装 yarn add -D css-loader
            2、配置
        babel 将JavaScript的新属性(ES6+) 编译成能够被老版浏览器识别的方案
            1、安装 yarn add -D babel-loader @babel/core @babel/preset-env
            2、配置
            3、再package.json中设置浏览器兼容列表 browsersList
    */
    module: {
        rules: [
            {
                test: /\.css$/i, // 过滤文件 要处理哪些文件 
                use: ['style-loader', 'css-loader'] // 使用什么处理文件 css-loader 负责转换/引入 style-loader 负责使用 顺序要求 从后往前
            },
            {
                test: /\.(jpg|png|svg)$/i,
                type: 'asset/resource' //图片指定资源类型的数据，可以通过指定type来处理
            },
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/, // 排除哪些文件转换
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                    },
                },
            }
        ]
    },
    /**
     * 插件 plugin
     *      用来拓展webpack的功能
     */
    plugins: [
        new HTMLPlugin({
            // title: '123123'
            template: "./src/index.html"
        })
    ],

    devtool: "inline-source-map",    //设置代码映射

    devServer: {
        open: true, // 在浏览器中打开指定页面
        port: 8080, //http服务器端口
        proxy: { //设置代理
            '/api': {
                target: 'http://localhost:3000',
                pathRewrite: { '^/api': '' },
            },
        },
    }
}