const CompressionWebpackPlugin = require('compression-webpack-plugin');
const productiongzipextensions = ['js','css']
//build生产环境是不打包以下内容
let externals={
  'vue':'Vue',
  'vue-router':'VueRouter',
  'element-ui':'ELEMENT',
  'axios':'axios',
}
//build生产环境是使用cdn方式加载 减小打包体积
let cdn = {
  css: [
    // element-ui css
    'https://unpkg.com/element-ui/lib/theme-chalk/index.css',
  ],
  js: [
    // vue must at first!
    "https://unpkg.com/vue@2.6.11/dist/vue.js",//vue.js
    "https://unpkg.com/vue-router@3.2.0/dist/vue-router.js",//vue-router
    'https://unpkg.com/element-ui/lib/index.js', // elementUI
    "https://unpkg.com/axios/dist/axios.min.js",//axios.js
  ]
}
//开发环境时正常打包 不使用cdn加载
externals=process.env.NODE_ENV==='production'?externals:{}
cdn=process.env.NODE_ENV==='production'?cdn:{css:[],js:[]}
module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
      ? './'
      : '/',
  chainWebpack: config => {
    // webpack热更新
    config.resolve.symlinks(true);
    //px2rem配置
    config.module
      .rule('css')
      .test(/\.css$/)
      .oneOf('vue')
      .resourceQuery(/\?vue/)
      .use('px2rem')
      .loader('px2rem-loader')
      .options({
        remUnit: 192
      });
    //index页面引入cdn配置
    config.plugin('html').tap(args=>{
      args[0].cdn=cdn
      return args
    })
    devServer={
      host:'0.0.0.0',
      port:8080,
    }
  },
  //gzip配置 服务器端也需要配置
  configureWebpack:config=>{    
    if(process.env.NODE_ENV === 'production'){
      config.plugins.push(new CompressionWebpackPlugin({
        algorithm:'gzip',
        test: new RegExp('\\.('+productiongzipextensions.join('|')+')$'),
        threshold:10240,
        minRatio:0.8
      }));    
    };

  },
  configureWebpack:{
    externals,
  },
  // css:{
  //   loaderOptions: {
  //     css: {},
  //     postcss: {
  //       plugins: [
  //         require('postcss-px2rem')({
  //           remUnit: 192
  //         })
  //       ]
  //     }
  //   }
  // }
  
    
}