const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
     // 入口
    entry: './src/index.js',

    output: {
        filename: 'bundle.js',
        // 需要绝对路径
        path: path.resolve(__dirname, './dist'),
        clean: true, // 清除上一次打包内容
        //文件名自动生成 生成名内容hash值
        assetModuleFilename: 'images/[contenthash][ext]'
    },

    mode:'development',
    // 定位错误代码位置
    devtool: 'inline-source-map',
    // 自动打包配置
    plugins: [
        new HtmlWebpackPlugin({
            // 打包的模板html
            template: './index.html',
            // 输出的文件名
            filename: 'index.html',
            //在哪里引入
            inject: 'body'
        })

    ],
    // 热加载
    // devServer: {
    //     static:'./dist'
    // }
    module: {
        // type参数 asset/resources 打包成资源 asset/inline 打包base64 默认8k 可修改
        rules: [
            {
                test:/\.png$/,
                type: 'asset/resource',
                //generator 优先于output配置
                //generator: {
                //    filename: 'images/test.png',
                //}
            },
            {
                test:/\.svg$/,
                type: 'asset/inline',

            },
            {
                test:/\.txt$/,
                type: 'asset/source',
            },
            {
                test:/\.jpg$/,
                // 自动选择打包导出类型,默认大于8k 打包出来,小于转成base64
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        // 大于4m才打包
                        maxSize: 4 * 1024 * 1024
                    }
                }
            },
        ]
    }
}