const CompressionPlugin = require('compression-webpack-plugin')
const path = require('path')
const webpack = require('webpack')
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')
const pxtovw = require('postcss-px-to-viewport')
module.exports = {
  baseUrl: '/fvue',
  runtimeCompiler: true,
  // 开启css sourceMap便于查看线上代码样式  关闭extract 否则无效
  // css: {
  //   extract: false,
  //   sourceMap: true,
  // },

  //  devServer: {
  //   //proxy:{'/api':{}},代理器中设置/api,项目中请求路径为/api的替换为target
  //   proxy: {
  //     '/zsdoor': {
  //       target: 'http://183.64.175.153:28880', //代理地址，这里设置的地址会代替axios中设置的baseURL
  //       changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
  //       //ws: true, // proxy websockets
  //       //pathRewrite方法重写url
  //       pathRewrite: {
  //         '^/zsdoor': '/'
  //         //pathRewrite: {'^/api': '/'} 重写之后url为 http://192.168.1.16:8085/xxxx
  //         //pathRewrite: {'^/api': '/api'} 重写之后url为 http://192.168.1.16:8085/api/xxxx
  //       }
  //     }
  //   }
  // },

  // 开启css sourceMap便于查看线上代码样式  关闭extract 否则无效
  css: {
    extract: false,
    sourceMap: true,
    loaderOptions: {
      postcss: {
        //给postcss-loader传递选项
        plugins: [
          new pxtovw({
            unitToConvert: 'px', //需要转换的单位，默认为"px"；
            viewportWidth: 1920, //设计稿的视口宽度
            unitPrecision: 6, //单位转换后保留的小数位数
            propList: ['*'], //要进行转换的属性列表,*表示匹配所有,!表示不转换
            viewportUnit: 'vw', //转换后的视口单位
            fontViewportUnit: 'vw', //转换后字体使用的视口单位
            selectorBlackList: [], //不进行转换的css选择器，继续使用原有单位
            minPixelValue: 1, //设置最小的转换数值
            mediaQuery: false, //设置媒体查询里的单位是否需要转换单位
            replace: true, //是否直接更换属性值，而不添加备用属性
            exclude: [/node_modules/] //忽略某些文件夹下的文件
          })
        ]
      }
    }
  },
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // gzip压缩
      config.plugins = [
        ...config.plugins,
        new CompressionPlugin({
          // 要压缩的文件类型
          test: /\.js$|\.html$|\.css/,
          // 大于该尺寸的文件才压缩（单位byte)
          threshold: 10240,
          // 是否删除原文件
          deleteOriginalAssets: false
        }),
        new webpack.DllReferencePlugin({
          context: process.cwd(),
          manifest: require('./public/js/vendor-manifest.json')
        }),
        // 将 dll 注入到 生成的 html 模板中
        new AddAssetHtmlPlugin({
          // dll文件位置
          filepath: path.resolve(__dirname, './public/js/*.js'),
          // dll 引用路径
          publicPath: '/fvue/js',
          // dll最终输出的目录
          outputPath: './js',
          includeSourcemap: false
        })
      ]
      // 删除调试语句
      config.optimization.minimizer[0].options.terserOptions.compress.warnings = false
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
      config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger = true
      config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs = [
        'console.log'
      ]
    }
  },
  chainWebpack: config => {
    config.devServer.disableHostCheck(true)
    // config.entry('index').add('babel-polyfill');
    if (process.env.NODE_ENV === 'production') {
      // 配置打包时分包的数量上限和单个文件的最小尺寸
      config.plugin('chunkPlugin').use(webpack.optimize.LimitChunkCountPlugin, [
        {
          maxChunks: 10,
          minChunkSize: 10000
        }
      ])
    }
  },
  productionSourceMap: false
}
