// commonjs
// 引入eslint
const eslintplugin = require('eslint-webpack-plugin');
// 引入minicss
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
 
module.exports = {
    mode: 'development',//none development production
    target: ['web', 'es5'], // 让 webpack 生成 ES5 代码
    // sourcemap 用来映射源代码和打包后的代码
    devtool: 'eval-cheap-source-map',// 源码映射 方便调试
 
    // 优化相关-代码分割
    // 单入口=》 runtime+vendor+核心业务+后续加载的异步模块
    // 多入口=》 runtime+vendor+每个入口的核心业务+common
    // 如果是多入口 如果多个入口共同引入了同一个js文件 那么这个js就会被重复请求
    // 这时可以配置splitChunks来将这个js独立打包出来 然后通过浏览器的缓存机制 就可以避免重复请求
    optimization: {
        splitChunks: {
            cacheGroups: {
                // 这里是为了将第三方依赖打包成一个文件 避免和业务代码打包在一起
                vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    filename: "vendor.js",
                    chunks: "all",
                    minChunks: 1,
                },
                // 这里是为了将业务代码打包成一个文件 避免和第三方依赖打包在一起
                default: {
                    chunks: 'all',// all async initial 分别代表全部 异步 初始
                    minSize: 0,// 最小大小 这里为了测试 改为0 表示只要引用就打包
                    minChunks: 2,// 最小引用次数 这里为了测试 改为2 表示只要引用2次就打包
                    filename: "common.js",
 
                }
            }
 
        },
        runtimeChunk: {
            name: "runtime",
 
        }
    },
    // entry:'./app.js',
    entry: {
        app: './app.js',
        app2: './app2.js'
    },
    output: {
        path: __dirname + '/dist',
        filename: '[name].[chunkhash:4].bundle.js',
        // 如果将打包出来的js css放到了cdn上 就需要加上url前缀
        // publicPath: 'https://cdn.example.com/'
    },
    devServer: {
        port:2000,
        hot:true,
        proxy:{
            '/api':{
                target:'http://localhost:3000',
                changeOrigin:true,
                pathRewrite:{
                    '^/api':''
                }
            }
        }
    },
    resolve: {
        // 路径别名
        alias: {
            "@": path.resolve(__dirname, 'src'),
        },
        // 省略后缀
        extensions: ['.js', '.ts', '.tsx', '.css', '.less'],
    },
    //loader
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: {
                    loader: 'ts-loader',
                    options: {
 
                    }
                },
                // exclude: /node_modules/
            },
            {
                test: /\.js$/,//定义loader需要去处理哪种类型的东西
                use: {
                    loader: 'babel-loader',
                    options: {
                        //可以写在根目录下的.babelrc中
                    }
                }
            },
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', './mycss-loader']
            },
            {
                test: /\.less$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
            },
            {
                test: /\.(png|jpe?g|gif|svg)$/i,
                // type: 'asset/inline'  // 强制所有图片转 base64
                type: 'asset/resource',  // 将图片转换为文件，并输出到指定目录
                parser: {
                    dataUrlCondition: {
                        maxSize: 8 * 1024  // 小于 8kb 转 base64
                    }
                },
                generator: {
                    filename: 'images/[name].[chunkhash:4][ext]'
                }
            }
        ]
    },
    plugins: [
        // new eslintplugin()
        new MiniCssExtractPlugin({
            filename: './css/[name].[chunkhash:4].css'
        }),
        new CssMinimizerPlugin(),
        new HtmlWebpackPlugin({
            template: './index.html',
            filename: 'index.html',
            chunks: ['app'],
            inject: 'body',//js注入位置
            minify: {
                removeComments: true,
            }
        })
 
    ]
}