const path = require('path')
// const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
const webpack = require('webpack')
const CompressionPlugin = require('compression-webpack-plugin')
const api = '9000'
function resolve (dir) {
  return path.join(__dirname, '.', dir)
}
module.exports = {
  css: {
    extract: false
  },
  //下面这段代码是用来替换浏览器的图标
  pwa: {
    iconPaths: {
      favicon32: 'favicon.ico',
      favicon16: 'favicon.ico',
      appleTouchIcon: 'favicon.ico',
      maskIcon: 'favicon.ico',
      msTileImage: 'favicon.ico'
    }
  },
  publicPath: '/xinzhou/',
  // outputDir: 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）
  outputDir: 'xinzhou',
  //用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
  assetsDir: 'static',
  lintOnSave: false,
  pages: {
    index: {
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html',
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    }
  },
  productionSourceMap: false,
  transpileDependencies: ['node_modules/webpack-dev-server/client'],
  chainWebpack: config => {
    //重要
    config.entry.app = ['@babel/polyfill', './src/main.js']

    //重要：通过add方法，配置babel需要另外转换的文件
    config.module
      .rule('compile')
      .test(/\.js$/)
      .include.add(resolve('src'))
      .add(resolve('src/store/modules')) //本人配置
      .add(resolve('assets'))
      .add(resolve('public')) //本人配置
      .add(resolve('static'))
      .add(resolve('node_modules/webpack-dev-server/client'))
      .add(resolve('node_modules'))
      .end()
      .use('babel')
      .loader('babel-loader')
      .options({
        presets: [
          [
            '@babel/preset-env',
            {
              modules: false
            }
          ]
        ]
      })
  },
  configureWebpack: {
    // webpack 配置
    output: {
      // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
      filename: `static/js/[name].${new Date().getTime()}.js`,
      chunkFilename: `static/js/[name].${new Date().getTime()}.js`
    },

    plugins: [
      new webpack.IgnorePlugin({
        resourceRegExp: /^\.\/locale$/,
        contextRegExp: /moment$/
      }),
      // 下面两项配置才是 compression-webpack-plugin 压缩配置
      // 压缩成 .gz 文件
      new CompressionPlugin({
        filename: '[path][base].gz',
        algorithm: 'gzip',
        test: /\.js$|\.css$|\.html$/,
        threshold: 10240,
        minRatio: 0.8
      })
    ],
    resolve: {
      alias: {
        '@': resolve('src'),
        '@components': resolve('src/components')
      }
    }
  },
  // 由于浏览器有跨域限制,这里cli 工具提供了 启动本地代理服务器 请求
  devServer: {
    open: true,
    host: '0.0.0.0',
    port: 8080,
    hot: true,
    https: false,
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 后端服务域名
        secure: false, // 是否支持 https，默认 false
        ws: true, // 是否支持 websocket
        changeOrigin: true, // 是否支持跨域
        pathRewrite: {
          '^/api': '' // 路径片段重写
        }
      }
    }
  }
}