/**
 * 配置参考: https://cli.vuejs.org/zh/config/
 */

var webpack = require('webpack');
const path = require('path')
const pxtovw = require('postcss-px-to-viewport');
function resolve(dir) {
    return path.join(__dirname, dir)
}

module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
    chainWebpack: config => {
        const svgRule = config.module.rule('svg')
        svgRule.uses.clear()
        svgRule
            .test(/\.svg$/)
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')

       // svg图标加载
        config.module
        .rule('svg')
        .exclude.add(resolve('src/assets/svg/icons'))
        .end()

        config.module
        .rule('icons')// 定义一个名叫 icons 的规则
        .test(/\.svg$/)// 设置 icons 的匹配正则
        .include.add(resolve('src/assets/svg/icons'))// 设置当前规则的作用目录，只在当前目录下才执行当前规则
        .end()
        .use('svg-sprite')// 指定一个名叫 svg-sprite 的 loader 配置
        .loader('svg-sprite-loader')// 该配置使用 svg-sprite-loader 作为处理 loader
        .options({// 该 svg-sprite-loader 的配置
        symbolId:'icon-[name]'
        })
        .end()
    },
    
    configureWebpack: {
        resolve: {
            alias: {
                '@': resolve('src')
            }
        },
        plugins: [],
    },
    // eslint : false,
    // 默认打开eslint效验，如果需要关闭，设置成false即可
    lintOnSave: false,
    productionSourceMap: false,
    devServer: {
        open: true,
        port: 8082,
        https: false,
        hotOnly: false,
        overlay: {
            errors: true,
            warnings: true
        },
        // proxy: {
        //     '/asn': {
        //         target: 'http://192.168.0.67:8081',
        //         changeOrigin: true,
        //         // logLevel: 'debug',
        //         pathRewrite: {
        //           '^/asn': ''
        //         }
        //       }
        // }
    },
    css: {
        loaderOptions: {
            sass: {
                //给sass-loader传递选项
            },
            css: {
                //给css-loader传递选项
            },
            postcss: {
                //给postcss-loader传递选项
                plugins: [
                    new pxtovw({
                        unitToConvert: 'px', //需要转换的单位，默认为"px"；
                        viewportWidth: 375, //设计稿的视口宽度
                        unitPrecision: 5, //单位转换后保留的小数位数
                        propList: ['*'], //要进行转换的属性列表,*表示匹配所有,!表示不转换
                        viewportUnit: 'vw', //转换后的视口单位
                        fontViewportUnit: 'vw', //转换后字体使用的视口单位
                        selectorBlackList: [], //不进行转换的css选择器，继续使用原有单位
                        minPixelValue: 1, //设置最小的转换数值
                        mediaQuery: false, //设置媒体查询里的单位是否需要转换单位
                        replace: true, //是否直接更换属性值，而不添加备用属性
                        exclude: [/node_modules/] //忽略某些文件夹下的文件
                    })
                ]
            }
        }
    }
}