const path = require('path')
const webpack = require("webpack");
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = ['js', 'css'];
const resolve = dir => {
    return path.join(__dirname, dir)
};
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const BASE_URL = process.env.NODE_ENV === 'production' ?
    './' :
    '/';
module.exports = {
    publicPath: BASE_URL, // 基本路径,打包时加上.
    outputDir: process.env.outputDir, // 输出文件目录
    lintOnSave: false, // eslint-loader 是否在保存的时候检查
    // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
    // webpack配置
    chainWebpack: (config) => {
        // 修复HMR(热更新)失效
        config.resolve.symlinks(true);

        config.resolve.alias
            .set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components'))
            .set('@c', resolve('src/components'));

        //图片压缩
        config.module
            .rule("images")
            .use("image-webpack-loader")
            .loader("image-webpack-loader")
            .options({
                mozjpeg: {
                    progressive: true,
                    quality: 65
                },
                optipng: {
                    enabled: false
                },
                pngquant: {
                    quality: [0.65, 0.9],
                    speed: 4
                },
                gifsicle: {
                    interlaced: false
                },
                // webp: { quality: 75 }
            });

        //防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖
        const cdn = {
            // 访问https://unpkg.com/element-ui/lib/theme-chalk/index.css获取最新版本
            // css: ["//unpkg.com/element-ui@2.10.1/lib/theme-chalk/index.css"],
            // js: [
            //     "//unpkg.com/vue@2.6.10/dist/vue.min.js", // 访问https://unpkg.com/vue/dist/vue.min.js获取最新版本
            //     "//unpkg.com/vue-router@3.0.6/dist/vue-router.min.js",
            //     "//unpkg.com/vuex@3.1.1/dist/vuex.min.js",
            //     "//unpkg.com/axios@0.19.0/dist/axios.min.js",
            //     "//unpkg.com/element-ui@2.10.1/lib/index.js"
            // ]
        };


        // 删除 moment 除 zh-cn 中文包外的其它语言包，无需在代码中手动引入 zh-cn 语言包。
        config
            .plugin("ignore")
            .use(
                new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn$/)
            );

    },
    configureWebpack: (config) => {
        if (process.env.VUE_APP_MODE === 'production') {
            // 为生产环境修改配置...
            config.mode = 'production';

            // 开启预渲染
            config.plugins.push(new PrerenderSPAPlugin({
                // 生成文件的路径，也可以与webpakc打包的一致。
                // 下面这句话非常重要！！！
                // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
                staticDir: path.join(__dirname, 'dist'),

                // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
                routes: ['/', '/login', '/index'],

                // 这个很重要，如果没有配置这段，也不会进行预编译
                renderer: new Renderer({
                    inject: {
                        foo: 'bar'
                    },
                    headless: false,
                    // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
                    renderAfterDocumentEvent: 'render-event'
                })
            }))

            // 修改vue.config.js 分离不常用代码库
            //通过CDN加载进行加速加载资源。
            //chainWebpack配置中引入或在index.html引入资源
            config.externals = {
                // vue: "Vue",
                // "element-ui": "ELEMENT",
                // "vue-router": "VueRouter",
                // vuex: "Vuex",
                // axios: "axios"
            }
            // 取消webpack警告的性能提示
            config.performance = {
                hints: 'warning',
                //入口起点的最大体积
                maxEntrypointSize: 50000000,
                //生成文件的最大体积
                maxAssetSize: 30000000,
                //只给出 js 文件的性能提示
                assetFilter: function (assetFilename) {
                    return assetFilename.endsWith('.js');
                }
            }
        } else {
            // 为开发环境修改配置...
            config.mode = 'development'

        }
        Object.assign(config, {
            // 开发生产共同配置
            resolve: {
                alias: {
                    '@': path.resolve(__dirname, './src'),
                    '@c': path.resolve(__dirname, './src/components'),
                    '@p': path.resolve(__dirname, './src/views')
                } // 别名配置
            }
        })
        // 开启gzip压缩
        config.plugins.push(new CompressionWebpackPlugin({
            algorithm: 'gzip',
            test: /\.js$|\.html$|\.json$|\.css/,
            threshold: 10240,
            minRatio: 0.8
        }))
        // 开启分离chunk-vendors.js
        config.optimization = {
            runtimeChunk: 'single',
            splitChunks: {
                chunks: 'all',
                maxInitialRequests: Infinity,
                minSize: 20000,
                cacheGroups: {
                    vendor: {
                        test: /[\\/]node_modules[\\/]/,
                        name(module) {
                            // get the name. E.g. node_modules/packageName/not/this/part.js
                            // or node_modules/packageName
                            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
                            // npm package names are URL-safe, but some servers don't like @ symbols
                            return `npm.${packageName.replace('@', '')}`
                        }
                    }
                }
            }
        }
    },
    productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
    // css相关配置
    css: {
        extract: true, // 是否使用css分离插件 ExtractTextPlugin
        sourceMap: false, // 开启 CSS source maps?
        // modules: false, // 启用 CSS modules for all css / pre-processor files.
        // requireModuleExtension: true,
        loaderOptions: {
            css: {}, // 这里的选项会传递给 css-loader
            less: {
                modifyVars: {
                    // less vars，customize ant design theme
                    // 'primary-color': '#F5222D',
                    // 'link-color': '#F5222D',
                    // 'border-radius-base': '4px'
                },
                // DO NOT REMOVE THIS LINE
                javascriptEnabled: true
            },
            // postcss: {
            //     plugins: [
            //         // 把px单位换算成rem单位
            //         require('postcss-pxtorem')({
            //             rootValue: 75, // 换算的基数(设计图750的根字体为32)
            //             selectorBlackList: ['.van-'], // 要忽略的选择器并保留为px。
            //             propList: ['*'], // 可以从px更改为rem的属性。
            //             minPixelValue: 2 // 设置要替换的最小像素值。
            //         }),
            //         require('autoprefixer')
            //     ]
            //     // plugins: [
            //     //   require('autoprefixer')
            //     // ]
            // } // 这里的选项会传递给 postcss-loader
        }, // css预设器配置项 详见https://cli.vuejs.org/zh/config/#css-loaderoptions

    },
    parallel: require('os').cpus().length > 1, // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
    pwa: {}, // PWA 插件相关配置 see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    // webpack-dev-server 相关配置
    devServer: {
        open: false, // 自动打开浏览器
        host: '0.0.0.0', // 允许外部ip访问
        port: 8000, // 端口
        https: false, // 启用https
        overlay: {
            warnings: true,
            errors: true
        }, // 错误、警告在页面弹出
        // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理

        proxy: {
            '/api': {
                target: '<url>',
                ws: true,
                changeOrigin: true
            },
            '/foo': {
                target: '<other_url>'
            }
        }, // 配置多个代理
    },
    // 第三方插件配置
    pluginOptions: {

    },
    // 移动端适配
    chainWebpack: (config) => {
        config.module
        .rule('css')
        .test(/\.css$/)
        .oneOf('vue')
        .resourceQuery(/\?vue/)
        .use('px2rem')
        .loader('px2rem-loader')
        .options({
            remUnit: 75 // 75表示750的设计稿，37.5表示375的设计稿
        })
    }
}