1.Test/yangbing/webpack/webpack.config.js

const path = require("path")
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: "development",//模式 
    //"development",//开发模式
    //"production", //生产模式
    //"none"//无
    // entry:"./src/a1.js" , //单个入口
    // entry :{  //多个入口
    //     dada: './src/a1.js',
    //     lala:"./src/a2.js"
    // },
    // entry:[ //将多个js打包为一个js
    //     "./src/a1.js",
    //     "./src/a2.js"
    // ],
    output: { //出口
        // filename:"[name].js", //[name]-[id]-[hash].jss
        // filename:"file.js",//指定打包后的文件名称
        clean: true,//自动删除旧的打包文件 生成新的打包文件
        // path: path.resolve(__dirname,"dididi") //指定打包后的文件
    },
    /**loader 加载器 */
    module: {
        rules: [
            {
                test: /\.css$/,//作用于将css打包
                use: [
                    { loader: 'style-loader' },
                    { loader: 'css-loader' }
                ]
                // use:['style-loader','css-loader'],
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: 'asset/resource',
            },
            { //兼容老版的浏览器
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["@babel/preset-env"],
                    },
                },
            }
        ]
    },
    // 插件，自动生成html页面
    plugins: [new HtmlWebpackPlugin({
        title: "打包工具", //标题
        template: "./src/example.html"//模板
    })],
    // 代码映射
    // 点击打包=>直接跳转源代码
    devtool:"inline-source-map"
}