const CompressionWebpackPlugin = require('compression-webpack-plugin')
const path = require('path')
const webpack = require('webpack')
const productionGzipExtensions = ['js', 'css']

function resolve(dir) {
    return path.join(__dirname, './', dir)
}

module.exports = {
    // 禁用lint检查
    lintOnSave: false,
    // build不生成map文件
    productionSourceMap: false,
    outputDir: "managerdev",
    publicPath: '/managerdev/',
    // baseUrl: "./manager/",
    //代理服务器设置解决跨域的问题
    devServer: {
        //防止代理服务器，访问时显示：Invalid Host header
        disableHostCheck: true,
        open: true,
        port: 80,
        proxy: {
            '/api': {
                target: 'http://server1.cdkjcloud.com:8080',
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    '^/api': ''
                }
            },
            '/server1': {
                target: 'http://server1.cdkjcloud.com:8080',
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    '^/server1': ''
                }
            },
            '/server2': {
                target: 'http://server2.cdkjcloud.com',
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    '^/server2': ''
                }
            },
            '/ping': {
                target: 'http://server2.cdkjcloud.com',
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    '^/ping': ''
                }
            },
            '/wx': {
                target: 'https://api.weixin.qq.com',
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    '^/wx': ''
                }
            },
        }
    },
    configureWebpack: config => {
        // 公共代码抽离
        config.optimization = {
            splitChunks: {
            cacheGroups: {
                vendor: {
                chunks: 'all',
                test: /node_modules/,
                name: 'vendor',
                minChunks: 1,
                maxInitialRequests: 5,
                minSize: 0,
                priority: 100
                }
            }
            }
        }
    },
    // 将文件打包成gz文件 ---然后配置nginx让浏览器直接解析gz文件
    configureWebpack:{  
        // 开启debugger
        // devtool: '#eval-source-map',
        resolve:{
          alias:{
            '@':path.resolve(__dirname, './src'),
            '@i':path.resolve(__dirname, './src/assets'),
          } 
        },
        plugins: [
          // Ignore all locale files of moment.js
          new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
          
          // 配置compression-webpack-plugin压缩
          new CompressionWebpackPlugin({
            algorithm: 'gzip',
            test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
            threshold: 10240,
            minRatio: 0.8
          }),
          new webpack.optimize.LimitChunkCountPlugin({
            maxChunks: 5, 
            minChunkSize: 100
          })
        ]
    
    },
    chainWebpack: config => {
        // 精简js文件
        config.optimization.minimize(true);
        // 移除多余插件，避免加载多余资源
        config.plugins.delete('prefetch');

        config.plugin('define').tap(args => {
            const argv = process.argv
            const icourt = argv[argv.indexOf('--icourt-mode') + 1]
        
            args[0]['process.env'].MODE = `"${icourt}"`
        
            return args
        })
        // svg rule loader
        const svgRule = config.module.rule('svg') // 找到svg-loader
        svgRule.uses.clear() // 清除已有的loader, 如果不这样做会添加在此loader之后
        svgRule.exclude.add(/node_modules/) // 正则匹配排除node_modules目录
        svgRule // 添加svg新的loader处理
        .test(/\.svg$/)
        .use('svg-sprite-loader')
        .loader('svg-sprite-loader')
        .options({
            symbolId: 'icon-[name]',
        })
    
        // 修改images loader 添加svg处理
        const imagesRule = config.module.rule('images')
        imagesRule.exclude.add(resolve('src/icons'))
        config.module
        .rule('images')
        .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
    },
    /**
     * vue项目在移动端适配 px转rem步骤
     * 1. 安装npm i postcss-px2rem --save  npm i lib-flexible --save 
     * 2.在main.js文件中引入 import 'lib-flexible/flexible.js'
     * 3.在vue.config.js中配置如下css
     * 4.还需要在index.html文件中设置meta <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/
     */
    css:{
        loaderOptions: {
            css: {
                // options here will be passed to css-loader
            },
            postcss: {
                // options here will be passed to postcss-loader
                plugins:[ require('postcss-px2rem')({
                    remUnit: 37.5  //要除以2因为是2倍图，除以2因为第三方插件是1倍的，这里是设计稿的尺寸是750px
                })]
            }
        }
    }
}