let path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
module.exports={
//入口文件
    entry:'./src/index.js',
//出口
    output:{
        // 文件名
        filename:'bundle.js',
        // 输出的路径，绝对路径
        path:path.resolve(__dirname,'./dist')
    },
//开发模式
    mode:'development',
//使用的模块
    module:{
        rules:[
            {
                test:/\.css$/,//匹配css文件
                use:[
                    // use数组里中的loader的执行顺序为从下到上，逆序执行
                    // 将js的样式内容插入到style标签里面
                    "style-loader",
                    // 将css文件转化js文件
                    "css-loader"
                ]
            },
            {
                test:/\.(jpg|png|gif)$/,//匹配图片
                loader:'url-loader',
                // 图片小于8kb，base64处理，减少请求数量
                options:{
                    limit:8*1024,
                    // es6自带有URL的解析，将其关闭
                    esModule:false,
                    // [hash:10]取图片hash的前十位，[ext]取图片的扩展名
                    name:'[hash:10].[ext]'
                }
            },
            {
                test:/\.html$/,
                loader:'html-loader'
            }
        ]
    },
//插件
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ],
    // 模块热更新
    devServer:{
        // 项目构建路径
        contentBase:path.resolve(__dirname,'dist'),
        // 启动gzip压缩
        compress:true,
        // 设置端口号
        port:3000,
        // 是否自动打开浏览器
        open:true
    }
}