const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
const BASE_URL = IS_PROD ? '/' : '/' // 路由hestory模式,使用'/'，hash模式使用'./'
// SEO预渲染
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
//去掉console.log
const TerserPlugin = require('terser-webpack-plugin')
const path = require('path');

//gzip压缩需要的包
const CompressionPlugin = require('compression-webpack-plugin')
//各种文件的匹配
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i

module.exports = {
    lintOnSave: false,
    publicPath: BASE_URL,
    outputDir: 'dist',
    assetsDir: 'static',
    runtimeCompiler: true, 
    productionSourceMap: false,
    chainWebpack: config => {
        config
            .plugin('html')
            .tap(args => {
                args[0].title = 'XC'
                return args
            });
    },
    css: {
        // extract: false,
        loaderOptions: {
            less: {
                // javascriptEnabled: true,
                modifyVars: {
                    hack: `true; @import "~@/theme/theme.less";@import "~@/assets/css/font-size.less";`,
                }
            },
            postcss: {
                plugins: [
                    // require("autoprefixer")({
                    //     // 配置使用 autoprefixer
                    //     overrideBrowserslist: ["last 15 versions"]
                    // }),
                    // require("postcss-pxtorem")({
                    //     rootValue: 100, // 换算的基数
                    //     // 忽略转换正则匹配项。插件会转化所有的样式的px。比如引入了三方UI，也会被转化。目前我使用 selectorBlackList字段，来过滤
                    //     //如果个别地方不想转化px。可以简单的使用大写的 PX 或 Px 。
                    //     selectorBlackList: ["ig"],
                    //     propList: ["*"],
                    //     //是否转化三方UI框架,一用以下配置为不转化
                    //     // exclude: /node_modules/
                    // })
                ]
            }
        }
    },
    configureWebpack: config => {
        if(IS_PROD){
            const plugins = []
            plugins.push(
                // 压缩
                // new CompressionPlugin({
                //     filename: '[path].gz[query]',
                //     algorithm: 'gzip',
                //     minRatio: 0.8,
                //     test: productionGzipExtensions, //匹配文件名
                //     threshold: 102400, //对超过10k的数据压缩
                //     deleteOriginalAssets: true //删除源文件
                // }),
                new TerserPlugin({
                    terserOptions: {
                        ecma: undefined,
                        warnings: false,
                        parse: {},
                        compress: {
                            drop_console: true,
                            drop_debugger: false,
                            pure_funcs: ['console.log'] // 移除console
                        }
                    }
                }),
                new PrerenderSPAPlugin({
                    // 生成文件的路径，也可以与webpakc打包的一致。
                    // 下面这句话非常重要！！！
                    // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
                    staticDir: path.join(__dirname,'dist'),
                    // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
                    routes: ['/', '/home', '/work', '/about', '/contact'],
                    // 这个很重要，如果没有配置这段，也不会进行预编译
                    renderer: new Renderer({
                        inject: {
                            foo: 'bar'
                        },
                        headless: false,
                        // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
                        renderAfterDocumentEvent: 'render-event'
                    })
                }),
            )
            config.plugins = [
                ...config.plugins,
                ...plugins
            ]
        }
    }
        
}