// vue.config.js
"use strict";
const path = require("path");
const CopyWebpackPlugin = require('copy-webpack-plugin')

const IS_PROD = ["production"].includes(process.env.NODE_ENV);

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

const name = "vue-base-h5"; // page title

module.exports = {
    lintOnSave: false, // eslint验证是否开启
    devServer: {
        port: 8080,
        open: true,
        overlay: {
            warnings: false,
            errors: true,
        },
        // 使用mock数据接口，所有的接口都会注册在这里
        before: require("./mock/mock-server.js"),
    },
    configureWebpack: {
        name: name,
        resolve: {
            alias: {
                "@": resolve("src"),
            },
        },
    },
    css: {
        extract: IS_PROD, // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。
        loaderOptions: {
            sass: {
                implementation: require("sass"),
                // 向全局sass样式传入共享的全局变量, $src可以配置图片cdn前缀
                // 详情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders
                // prependData: `
                // @import "assets/css/mixin.scss";
                // @import "assets/css/variables.scss";
                // `,
            },
        },
    },
    configureWebpack: config => {
       
       if (IS_PROD) {
           // 将serviceConfig.js 复制到根目录。目的是为了把serviceConfig.js里面的config变量挂载到全局里
           config.plugins.push(
               new CopyWebpackPlugin([
                   { 
				   from: path.join(__dirname, 'src/config/serviceConfig.js'),  
				   to: path.join(__dirname, '/dist') }
               ])
           )
       }
    },

    chainWebpack: config => {
        // 别名 alias
        config.resolve.alias
            .set('@', resolve('src'))
            .set('assets', resolve('src/assets'))
            .set('api', resolve('src/api'))
            .set('views', resolve('src/views'))
            .set('components', resolve('src/components'))


        /**
         * 设置保留空格
         */
        config.module
            .rule('vue')
            .use('vue-loader')
            .loader('vue-loader')
            .tap(options => {
                options.compilerOptions.preserveWhitespace = true
                return options
            })
            .end()

        config.when(IS_PROD, config => {
            config.optimization.splitChunks({
                chunks: 'all',
                cacheGroups: {
                    // cacheGroups 下可以可以配置多个组，每个组根据test设置条件，符合test条件的模块
                    commons: {
                        name: 'chunk-commons',
                        test: resolve('src/components'),
                        minChunks: 3, //  被至少用三次以上打包分离
                        priority: 5, // 优先级
                        reuseExistingChunk: true // 表示是否使用已有的 chunk，如果为 true 则表示如果当前的 chunk 包含的模块已经被抽取出去了，那么将不会重新生成新的。
                    },
                    node_vendors: {
                        name: 'chunk-libs',
                        chunks: 'initial', // 只打包初始时依赖的第三方
                        test: /[\\/]node_modules[\\/]/,
                        priority: 10
                    },
                    vantUI: {
                        name: 'chunk-vantUI', // 单独将 vantUI 拆包
                        priority: 20, // 数字大权重到，满足多个 cacheGroups 的条件时候分到权重高的
                        test: /[\\/]node_modules[\\/]_?vant(.*)/
                    }
                }
            })
            config.optimization.runtimeChunk('single')
        })
    }
};