const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin") //自动生成html
const HelloWorldPlugin = require("./plugs.test") //自定义插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin") //css抽离
const CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin") //css压缩
module.exports = {
    entry:'./src/index.js',
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'./dist'),
        clean:true
    },
    mode:'development',//热加载
    devtool:"inline-source-map", //代码精准定位
    plugins:[
        new HtmlWebpackPlugin({
            template:"./index.html",
            inject:"body"
        }),
        new HelloWorldPlugin({options: true}),
        new MiniCssExtractPlugin({
            filename:'static/styles/[contenthash].css'
        }),//压缩、抽离CSS
    ],
    devServer:{ //自动刷新
        static:'./dist'
    },
    module:{
        rules:[
            {
                test:/\.jpg|.png$/,
                type: 'asset/resource',
                generator: {
                    filename: 'static/images/[contenthash][ext]',
                }
            },
            {
                //文件过小，转成base64
                test:/\.jpg|.png$/,
                type: 'asset',
                parser:{
                    dataUrlCondition:{
                        maxSize:4 * 1024
                    }
                }
            },
            {
                //解析css代码
                test:/\.(css|less)$/,
                use:[MiniCssExtractPlugin.loader,'css-loader','less-loader']
            },
            { //解析自定义字体
                test:/\.(woff|woff2|eot|ttf|otf)$/,
                type:'asset/resource',
                generator: {
                    filename: 'static/font/[contenthash][ext]',
                }
            },
            {
                test:/\.js$/,
                exclude:/node_modules/,
                use:{
                    loader:"babel-loader",
                    options:{
                        presets:['@babel/preset-env'],
                        // plugins:[
                        //     [
                        //         '@/babel/plugin-transform-runtime'
                        //     ]
                        // ]
                    }
                }
            }
        ]
    },
    optimization:{
        minimizer:[
            new CssMinimizerWebpackPlugin()
        ]
    }
}