// 安装插件
npm i speed-measure-webpack-plugin webpack-bundle-analyzer -D

// webpack.analy.js
const prodConfig = require('./webpack.prod')
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')
const smp = new SpeedMeasurePlugin() // 实例化分析插件
const {merge} = require('webpack-merge')
const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer') // 引入分析打包结果插件

// 使用smp.wrap方法，把生产环境配置传进去，由于后面可能会加分析配置，所以先留出合并空位
module.exports = smp.wrap(merge(prodConfig , {
    plugins: [
        new BundleAnalyzerPlugin() // 配置分析打包结果插件
    ]
}))

// webpack.prod.js
const {merge} = require('webpack-merge')
const basicConfig = require('./webpack.base')
const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = merge(basicConfig, {
    mode: 'production',

    plugins: [
        new CopyWebpackPlugin({
            patterns: [
                {
                    from: path.resolve(__dirname, '../public'),
                    to: path.resolve(__dirname, '../dist'),
                    filter: source => !source.includes('index.html')
                }
            ]
        })
    ]
})

// webpack.base.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')

module.exports = {
    entry: path.join(__dirname, '../src/index.tsx'),

    output: {
        filename: 'static/js/[name].js',
        path: path.resolve(__dirname, '../dist'),
        clean: true,
        publicPath: '/' // 打包后文件的公共前缀路径
    },

    module: {
        rules: [
            {
                test: /\.(css|less)$/,
                use: [
                    "style-loader",
                    "css-loader",
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: ["autoprefixer"]
                            }
                        }
                    },
                    "less-loader"
                ]
            },
            {
                test: /\.(ts|tsx)$/,
                use: "babel-loader"
            },
            {
                test: /\.(jpg|jpeg|png|gif|svg)$/,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 1000000 * 1024
                    }
                },
                generator: {
                    filename: 'static/image/[name][ext]'
                }
            }
        ]
    },

    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, '../public/index.html'),
            inject: true
        }),

        new webpack.DefinePlugin({
            'process.env.BASE_ENV': JSON.stringify(process.env.BASE_ENV)
        })
    ],

    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    }
}

// package.json添加webpack打包分析脚本命令，在scripts新增：
{
    "scripts": {
        "build:analy": "cross-env NODE_ENV=production BASE_ENV=production webpack -c build/webpack.analy.js"
    }
}

// 执行指令，打包完成后浏览器会自动打开窗口，可以看到打包文件的分析结果页面
npm run build:analy