/**
*created by xuqiang 19/05/08
*/
const path = require('path');
const CircularDependencyPlugin = require('circular-dependency-plugin');
const CompressionPlugin = require("compression-webpack-plugin");
const webpack = require('webpack');

const resolve = dir => {
    return path.join(__dirname, dir)
};
let outputDir = process.env.outputDir;
let  BASE_PATH = './' ;
module.exports = {
    publicPath: BASE_PATH,
    // outputDir: "E:\\web-code\\build-code\\"+outputDir, // 输出文件目录  在当前根目录下生成打包后的工程 开发者自定义存放打包后的工程的路径 可按需修改
    outputDir: "./"+outputDir, // 输出文件目录  在当前根目录下生成打包后的工程 开发者自定义存放打包后的工程的路径 可按需修改
    lintOnSave: true, //是否在保存的时候检查  检查出的错误会触发编译失败。
    chainWebpack(config){
        config.plugin('html').tap(args => {// 解决动态加载组件出现循环依赖的问题
            args[0].chunksSortMode = 'none';
            return args
        });
        config.resolve.alias
            .set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components'))
            .set('_c', resolve('src/components'))
            .set('_conf', resolve('config'));

        // 添加svg新的loader处理
        const svgRule = config.module.rule('svg'); // 找到svg-loader
        svgRule.uses.clear() ;// 清除已有的loader, 如果不这样做会添加在此loader之后
        svgRule.exclude.add(/node_modules/) ;// 正则匹配排除node_modules目录
        svgRule
            .test(/\.svg$/)
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]',
            })
            .end();
        // 开启图片压缩
        const imagesRule = config.module.rule('images');
        imagesRule.exclude.add(resolve('src/assets/icons'));//修改images loader 添加svg处理
        imagesRule
            .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
            .use('image-webpack-loader')
            .loader('image-webpack-loader')
            .options({ bypassOnDebug: true })
            .end();
        // 修改file loader 添加svg处理   "file-loader": "^2.0.0",其他版本bgurl编译会background: url([object Module])
        const fileRule = config.module.rule('file');
        fileRule.uses.clear();
        fileRule
            .test(/\.svg$/)
            .exclude.add(resolve('src/assets/icons'))
            .end()
            .use('file-loader')
            .loader('file-loader')
            .end();
        // 开启js、css压缩
        if (process.env.NODE_ENV === 'serve_pro'||process.env.NODE_ENV === 'build_pro') {
            config.plugin('compressionPlugin')
                .use(new CompressionPlugin({
                    test:/\.js$|\.html$|.\css/, // 匹配文件名
                    threshold: 10240, // 对超过10k的数据压缩
                    deleteOriginalAssets: false // 不删除源文件
                }))
        }
    },
    configureWebpack: {
        plugins: [
            new CircularDependencyPlugin({
                exclude: /a\.js|node_modules/,
                failOnError: true,
                cwd: process.cwd()
            }),
            new webpack.ProvidePlugin({  //只是引入了jq ，以防在用某些插件的时候缺少jq支持
                jQuery: 'jquery',
                $: 'jquery'
            })
        ],
        optimization: {
            splitChunks: {
                cacheGroups: {
                    commons: {
                        name: 'commons',
                        chunks: 'initial',
                        minChunks: 2
                    }
                }
            }
        }
    },
    productionSourceMap: false, // 生产环境是否生成 sourceMap 文件 default:true 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建
    css: {
        extract: true, // 是否使用css分离插件 ExtractTextPlugin
        sourceMap: false, // 开启 CSS source maps?
        loaderOptions: { // css预设器配置项
            less: {
                javascriptEnabled: true,
                importLoaders: 1,// 这里的选项会传递给 postcss-loader
            },
            css:{
                importLoaders: 1,// 这里的选项会传递给 css-loader
            }
        },
        modules: false // 启用 CSS modules for all css / pre-processor files.
    },
    parallel: require('os').cpus().length > 1,
    // webpack-dev-server 相关配置
    devServer: {
        host: '0.0.0.0',
        port: 9019, // 端口号
        https: false, // https:{type:Boolean}
        open: true, //配置自动启动浏览器
        hotOnly: false,
        proxy: {    // 设置代理
            '/api': {
                target: '<url>', // 域名
                ws: true, // 是否启用 websockets
                changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
                pathRequiresRewrite: {
                    "^/api": "/"
                }
            },
            '/api2': {
                target: '<other_url>'
            }
        }

    },
    // 第三方插件配置
    pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'less',
            patterns: [
             path.resolve(__dirname, "./src/assets/less/global.less") // 这段是自己加的，根据自己文件的位置来修改,用于添加全局样式表
            ]
        }
    }
};