// 打包分析
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
// 引入path
const path = require('path')

// 记录打包时间
const dayjs = require('dayjs')
process.env.VUE_APP_BUILD_TIME = dayjs().format('YYYY-MM-DD hh:mm:ss')

const resolve = dir => path.join(__dirname, dir)

/**
 * 自动引入全局的less变量
 * @param {*} rule
 */
const addStyleResource = rule => {
  rule
    .use('style-resource')
    .loader('style-resources-loader')
    .options({
      patterns: [
        // 需要全局导入的less,这个地方一点要写./src才行,否则会报错...
        path.resolve(__dirname, './src/assets/styles/constant.less')
      ]
    })
}

module.exports = {
  // 公共路径
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',

  // 打包文件夹名称
  outputDir: 'www',

  // 打包时不会生成 .map 文件， 加快打包速度，生产环境下不会看到源码
  productionSourceMap: false,

  // 格式检查
  lintOnSave: true,

  // 本地服务配置
  // devServer: {
  //   port: 8080,
  //   host: 'localhost', // 主机名称 真机调试时设置为 0.0.0.0
  //   https: false // 不使用https
  // },

  css: {
    extract: true, // 提取css代码
    sourceMap: false, // 是否开启sourceMap 默认是false | 开启后能看到 css 代码在哪里写的
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-px-to-viewport')({
            unitToConvert: 'px', // 需要转换的单位，默认为"px"
            viewportWidth: 375, // 视窗的宽度，对应移动端设计稿的宽度，一般是375
            viewportHeight: 812, // 视窗的高度，对应的是我们设计稿的高度
            unitPrecision: 5, // 单位转换后保留的精度
            propList: ['*'], // 能转化为vw的属性列表
            viewportUnit: 'vw', // 希望使用的视口单位
            fontViewportUnit: 'vw', // 字体使用的视口单位
            selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
            minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
            mediaQuery: false, // 媒体查询里的单位是否需要转换单位
            replace: true, // 是否直接更换属性值，而不添加备用属性
            exclude: /(\/|\\)(node_modules)(\/|\\)/ // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
          })
        ]
      }
    }
  },

  // 打包分析
  // configureWebpack: {
  //   plugins: [new BundleAnalyzerPlugin()]
  // }
  chainWebpack: config => {
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))
    // 配置别名
    config.resolve.alias.set('@', resolve('src'))
    // 移除 prefetch 插件
    config.plugins.delete('prefetch')
    // 移除 preload 插件
    config.plugins.delete('preload')
    // 拆包
    config.optimization.splitChunks({
      chunks: 'all',
      maxInitialRequests: Infinity,
      minSize: 249856, // 依赖包超过249856bit(244k)将被单独打包
      automaticNameDelimiter: '-',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name(module) {
            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
            return `chunk.${packageName.replace('@', '')}`
          },
          priority: 10
        }
      }
    })
  }
}