const path = require('path')
const autoprefixer = require('autoprefixer')
const pxtoviewport = require('postcss-px-to-viewport')

function resolve(dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  publicPath: process.env.VUE_APP_PRE_PATH,
  outputDir: 'intelligent-medicine-abinet',
  productionSourceMap: false,
  devServer: {
    port: 8080,
    progress: false, // vue-cli-service serve 启动进度的显示和隐藏
    headers: {
      'Access-Control-Allow-Origin': '*'
    }
  },
  chainWebpack: config => {
    config.plugin('html').tap(args => {
      args[0].alias = process.env.VUE_APP_ALIAS
      args[0].name = process.env.VUE_APP_TITLE
      return args
    })

    config.externals({
      vue: 'Vue',
      vuex: 'Vuex',
      axios: 'axios',
      lodash: '_',
      'vue-router': 'VueRouter',
      'vant': 'vant'
    })

    const svgRule = config.module.rule('svg')

    // 清除已有的所有 loader。
    // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
    svgRule.uses.clear()

    // 添加要替换的 loader
    // svgRule.use("vue-svg-loader").loader("vue-svg-loader");
    svgRule
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
  },
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          autoprefixer(),
          pxtoviewport({
            viewportWidth: 375
          })
        ]
      }
    }
  }
}