1.Test/xiangminmin/webpack/day01/webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    // 模式：  development 开发模式 production 生产模式 node 无
    mode: 'production',
    // 入口文件
    // entry: './src/myEntry.js',      //单个入口文件
    // entry:['./src/a.js','./src/b.js'],      //多个入口文件数组写法
    // entry:{                          //多个入口文件对象写法
    //     hello:'./src/a.js',
    //     hi:'./src/b.js'
    // },
    // 出口文件 : 指定打包后的文件存放位置 
    output:{
        // filename:"[name]-[id].js",   //打包后的文件名，[name]表示使用入口文件的名字
        filename:"newFile.js",
        clean:true,        //自动删除旧的打包文件并生成新的打包文件
        // path:path.resolve(__dirname,'newOutput'),  //path指定打包文件存放的目录，需先使用const引入path模块
    },

    // 加载器
    module:{
        rules:[
            { 
                test: /\.css$/, 
                // use的执行顺序是从后往前的，即先执行css-loader再执行style-loader
                use: ["style-loader", "css-loader"],
                // use:[
                //     {loader:"style-loader"},
                //     {loader:"css-loader"}
                // ]
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: 'asset/resource',
            },
            // babel-loader
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['@babel/preset-env']
                  }
                }
            }
        ]
    },
    plugins: [new HtmlWebpackPlugin({ 
        // 网页的title
        // title:"打包工具webpack"
        // 打包时的模板文件
        template:"./src/demo.html"
    })],
// 将源码和代码进行映射
    devtool: 'inline-source-map',
}