const path = require("path");
const resolve = (dir) => path.join(__dirname, dir);
// const SVGSpriteLoaderPlugin = require("svg-sprite-loader/plugin");

function extendDefaultPlugins (arr) {
  let plug = [
    'removeDoctype',
    'removeXMLProcInst',
    'removeComments',
    'removeMetadata',
    'removeEditorsNSData',
    'cleanupAttrs',
    'mergeStyles',
    'inlineStyles',
    'minifyStyles',
    'cleanupIDs',
    'removeUselessDefs',
    'cleanupNumericValues',
    'convertColors',
    'removeUnknownsAndDefaults',
    'removeNonInheritableGroupAttrs',
    'removeUselessStrokeAndFill',
    'removeViewBox',
    'cleanupEnableBackground',
    'removeHiddenElems',
    'removeEmptyText',
    'convertShapeToPath',
    'convertEllipseToCircle',
    'moveElemsAttrsToGroup',
    'moveGroupAttrsToElems',
    'collapseGroups',
    'convertPathData',
    'convertTransform',
    'removeEmptyAttrs',
    'removeEmptyContainers',
    'mergePaths',
    'removeUnusedNS',
    'sortDefsChildren',
    'removeTitle',
    'removeDesc'
  ];
  return plug.concat(arr);
}

// 添加less继承
function addStyleResource (rule) {
  rule.use('style-resource')
    .loader('style-resources-loader')
    .options({
      patterns: [
        resolve('src/assets/styles/common/common.less')
      ]
    })
}


module.exports = {

  publicPath: "./", // 默认'/'，部署应用包时的基本 URL
  indexPath: 'index.html', // 相对于打包路径index.html的路径
  outputDir: 'dist', // 'dist', 生产环境构建文件的目录
  assetsDir: 'static', // 相对于outputDir的静态资源(js、css、img、fonts)目录
  lintOnSave: false, // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码
  runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本

  chainWebpack: (config) => {

    config.resolve.symlinks(true); // 修复热更新失效

    // 路径别名
    config.resolve.alias
      .set("@", resolve("src"))
      .set("@node", resolve("node_modules"))
      .set("@com", resolve("src/components"))
      .set("@assets", resolve("src/assets"))
      .set("@api", resolve("src/api"))
      .set("@store", resolve("src/store"))
      .set("@modeConfig", resolve("public/static/config"))
      .set("@tools", resolve("src/tools"));

    // less 继承
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal'];
    types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)));

    // svg 雪碧图
    config.module // 排除其他svg-loader
      .rule('svg')
      .exclude.add(resolve('src/assets/icon/svg'))
      .end()
      .exclude.add(resolve('src/assets/icon/svg_fill'))
      .end();

    // svg雪碧图
    const svgRule = config.module.rule('icons');
    svgRule.test(/\.svg$/)
      .include.add(resolve('src/assets/icon/svg'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'svg-[name]',
        // extract: true,
        // publicPath: "img/",
        // spriteFilename: "svg-sprite-[hash:8].svg",
      });

    // config
    //     .plugin("svgsprite")
    //     .use(SVGSpriteLoaderPlugin, [{ 
    //       plainSprite: true
    //     }]);

    // svgo 去除svg中无用元素
    svgRule.use('svgo-loader').loader('svgo-loader').options({
      plugins: extendDefaultPlugins([{
        name: "removeAttrs",
        params: {
          attrs: 'fill',
        }
      }])
    });

    // svg雪碧图 不去除fill属性
    // const svgRuleFill = config.module.rule('icons_fill');
    // svgRuleFill.test(/\.svg$/)
    //     .include.add(resolve('src/assets/icon/svg_fill'))
    //     .end()
    //     .use('svg-sprite-loader')
    //     .loader('svg-sprite-loader')
    //     .options({
    //         symbolId: 'fill-[name]',
    //         // extract: true,
    //         // publicPath: "img/",
    //         // spriteFilename: "svg-sprite-[hash:8].svg",
    //     });

    // // config
    // //     .plugin("svgsprite")
    // //     .use(SVGSpriteLoaderPlugin, [{ 
    // //       plainSprite: true
    // //     }]);

    // // svgo 去除svg中无用元素
    // svgRuleFill.use('svgo-loader').loader('svgo-loader').options({
    //     plugins: extendDefaultPlugins([])
    // });

  },

  devServer: {
    //代理配置
    proxy: {
      '/cbk': {
        target: 'https://h5.caibeike.com.cn/', // 请求地址

        changeOrigin: true, // 在vue-cli3中，默认changeOrigin的值是true,意味着服务器host设置成target，这与vue-cli2不一致，vue-cli2这个默认值是false
        // changeOrigin的值是true,target是host, request URL是http://baidu.com
        // 如果设置changeOrigin: false，host就是浏览器发送过来的host，也就是localhost:8082。

        pathRewrite: {  // 路径重写，eg:把api接口替换为''
          '^/cbk': ''
        }
      }
    },
    open: false, // 是否打开浏览器
  }
}