const path = require('path');
const webpack = require('webpack');
const { merge } = require('webpack-merge');
const devConfig = require('./webpack.dev.js');
const prodConfig = require('./webpack.prod.js');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //打包html的插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const env = process.env.NODE_ENV

// console.log('环境变量：', env,)

// 获取处理样式的Loaders
const getStyleLoaders = (preProcessor) => {
    return [
        "style-loader",
        {
            loader: 'css-loader',
            // options: {
            //     sourceMap: true,
            // },
        },
        {
            loader: "postcss-loader",
            options: {
                // webpack4
                postcssOptions: {
                    plugins: [
                        // 对应的插件postcss-preset-env是帮postcss找到package.json中的browserlist里面的配置，通过配置加载指定的css兼容性样式
                        "postcss-preset-env", // 能解决大多数样式兼容性问题
                    ],
                },
                // webpack5
                // postcssOptions: {
                //     plugins: [
                //         require('postcss-preset-env')(),
                //     ]
                // },
            },
        },
        preProcessor && {
            loader: preProcessor,
            options: {
                sourceMap: true,
            },
        },
    ].filter(Boolean);
};

// 处理js兼容性
const babelLoaderConfig = {
    loader: 'babel-loader',
    options: {
        presets: [
            [
                '@babel/preset-env',
                {
                    // 按需加载
                    useBuiltIns: 'usage',
                    // 指定core-js版本
                    corejs: {
                        version: 3
                    },
                    // 指定兼容性做到哪个版本浏览器
                    targets: {
                        chrome: '60',
                        firefox: '60',
                        ie: '9',
                        safari: '10',
                        edge: '17'
                    }
                }
            ]
        ]
    }
}


// 导出对象
// module.exports = merge(env === 'development' ? devConfig : prodConfig, commonConfig)

// 导出函数
module.exports = (env = {}, argv) => {
    const { production } = env
    const commonConfig = {
        entry: './src/index.js',
        output: {
            filename: 'bundle.js',
            path: path.resolve(__dirname, './dist'),
            clean: true, // webpack 5 自动清除上次打包结果
        },
        // devtool: 'source-map', // 添加devtool配置
        // 配置默认后缀
        resolve: {
            extensions: ['.ts', '.tsx', '.js', '.json', '.svg']
        },
        module: {
            rules: [
                {
                    test: /\.ts$/,
                    exclude: /node_modules/,
                    use: [
                        babelLoaderConfig,
                        'ts-loader'
                    ]
                },
                // 自定义 loader
                // {
                //     test: /\.js$/,
                //     exclude: /(node_modules|bower_components)/,
                //     use: [babelLoaderConfig,
                //         {
                //             loader: path.resolve(__dirname, './custom-loaders/clear-console-loader.js'),
                //         }
                //     ]
                // },
                // enforce 属性
                {
                    test: /\.js$/,
                    exclude: /(node_modules|bower_components)/,
                    use: {
                        loader: path.resolve(__dirname, './custom-loaders/my-enforce-post.js'),
                    },
                    enforce: 'post'
                },
                {
                    test: /\.js$/,
                    exclude: /(node_modules|bower_components)/,
                    use: {
                        loader: path.resolve(__dirname, './custom-loaders/my-enforce-pre.js'),
                    },
                    enforce: 'pre'
                },
                /**
                 * 样式资源处理
                 */
                {
                    test: /\.css$/,
                    // 自定义 Loader
                    // {
                    //     loader: path.resolve(__dirname, './custom-loaders/my-style-loader.js'),
                    //     options: {
                    //         loaderName: 'custom-loader'
                    //     }
                    // },
                    // path.resolve(__dirname, './custom-loaders/my-style-loader.js'),
                    use: getStyleLoaders()
                },
                {
                    test: /\.less$/,
                    use: getStyleLoaders("less-loader"),
                },
                {
                    test: /\.s[ac]ss$/,
                    use: getStyleLoaders("sass-loader"),
                },
                {
                    test: /\.styl$/,
                    use: getStyleLoaders("stylus-loader"),
                },
                {
                    test: /\.(png|jpg|jpeg|gif|svg)$/,
                    // webpack 4 写法，webpack 5 已弃用
                    // css-loader（6.XX）不要使用file-laoder和url-loader，只能使用webpack5为我们提供的asset module type。
                    // 会导致对同一张图片打包出了两张，并且引发了冲突
                    // use: [
                    //     {
                    //         loader: 'url-loader',
                    //         options: {
                    //             name: '[name][hash:8].[ext]',
                    //             limit: 1024 * 8
                    //         }
                    //     },
                    //     {
                    //         loader: 'file-loader',
                    //         options: {
                    //             name: '[name][hash:6].[ext]',
                    //             // outputPath: './asset'
                    //         }
                    //     }
                    // ],
                    // webpack 5
                    // “资源模块”类型
                    // asset/resource： 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。
                    // asset/inline： 导出一个资源的 data URI。之前通过使用 url - loader 实现。
                    // asset/source： 导出资源的源代码。之前通过使用 raw - loader 实现。
                    // asset：在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url - loader，并且配置资源体积限制实现。
                    type: 'asset',
                    parser: {
                        dataUrlCondition: {
                            maxSize: 8 * 1024
                        }
                    },
                    generator: {
                        filename: 'asset/imgs/[name][hash:6][ext]',
                        //打包后对资源的引入，文件命名已经有/img了
                        publicPath: './'
                    }
                },
                // 字体文件
                // {
                //     test: /\.(otf|eot|woff2?|ttf|svg)$/i,
                //     type: "asset", // 一般会转换为 "asset/inline"
                //     generator: {
                //         filename: 'asset/fonts/[name][hash:6][ext]',
                //     }
                // },
                {
                    //打包其他资源(除了css、js、html、less、jpg、png、gif)资源以外的资源)
                    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, // 处理字体图标
                    exclude: /\.(css|js|html|less|jpg|png|gif)$/, // 排除css、js、html、less、jpg、png、gif资源
                    loader: 'file-loader',
                    options: {
                        name: '[hash:10].[ext]',
                        outputPath: './asset/fonts'
                    }
                },
                {
                    test: /\.html$/,
                    loader: 'html-loader',
                }
            ]
        },
        plugins: [
            new HtmlWebpackPlugin({
                filename: 'index.html',
                template: 'src/index.html',
                title: "看到这里就成功了",
                minify: { // 压缩HTML文件
                    removeComments: true, // 移除HTML中的注释
                    collapseWhitespace: true, // 删除空白符与换行符
                    minifyCSS: true// 压缩内联css
                },
            }),
            // webpack 4 调用清除打包目录插件
            // new CleanWebpackPlugin()
        ],
        mode: 'production'
    }
    commonConfig.mode = production ? "production" : "development"
    return merge(production ? prodConfig : devConfig, commonConfig)
}