// cnpm install compression-webpack-plugin@6.1.1 -D       gzip壓縮插件，需要引入
// cnpm i image-webpack-loader@8.1.0 --save-dev           圖片壓縮，不需要引入
// npm i webpack-bundle-analyzer@4.7.0 --save-dev         打包分析插件
// npm i speed-measure-webpack-plugin -D                  打包時間
// npm i hard-source-webpack-plugin -D                    構(gòu)建時進(jìn)行緩存

const CompressionWebpackPlugin = require('compression-webpack-plugin') // 開啟gzip壓縮， 按需引用
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin // 引入打包分析插件
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
const webpack = require('webpack')

const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i // 開啟gzip壓縮， 按需寫入
const isProduction = process.env.NODE_ENV === 'production'
const BASE_URL = process.env.NODE_ENV === 'production' ? './' : './'
const path = require('path')

function resolve (dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  // 其他配置可以走默認(rèn)
  publicPath: BASE_URL, // 基本路徑
  outputDir: 'dist', // 輸出文件目錄
  lintOnSave: process.env.NODE_ENV !== 'production', // 生產(chǎn)環(huán)境不進(jìn)行eslint校驗
  productionSourceMap: false, // 生產(chǎn)環(huán)境是否生成 sourceMap 文件
  // assetsDir: '',  // 靜態(tài)文件要不要放在一個文件夾里，默認(rèn)值是‘'，有需要可以自己改

  // webpack配置
  chainWebpack: config => {
    // 移除 preload(預(yù)載) 插件
    config.plugins.delete('preload')
    // 移除 prefetch(預(yù)取) 插件
    config.plugins.delete('prefetch')
    if (isProduction) {
      // 生產(chǎn)環(huán)境下---壓縮圖片
      config.module
        .rule('images')
        .use('image-webpack-loader')
        .loader('image-webpack-loader')
        .options({ bypassOnDebug: true })
        .end()
    }
  },
  configureWebpack: (config) => {
    // 生產(chǎn)和開發(fā)環(huán)境都有的配置
    config.devtool = 'source-map'
    // 開啟緩存
    config.plugins.push(
      new HardSourceWebpackPlugin()
    )
    // 配置別名
    Object.assign(config.resolve, {
      alias: {
        '@': path.resolve(__dirname, './src')
      }
    })
    // 生產(chǎn)環(huán)境下的配置
    if (isProduction) {
      // 添加webpack插件
      config.plugins.push(
        new SpeedMeasurePlugin(), // 構(gòu)建時間
        new BundleAnalyzerPlugin() // 構(gòu)建體積
        // 一些依賴，咱們也許只是用到了一部分，不必所有解析，好比moment中的語言包，咱們通常只用中文包就夠了，因此能夠這樣配置：
        // new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn/)
      )
      // 打包文件大小配置
      config.performance = {
        maxEntrypointSize: 10000000, // 根據(jù)入口起點的最大體積，控制 webpack 何時生成性能提示。
        maxAssetSize: 30000000 // 根據(jù)單個資源體積(單位: bytes)，控制 webpack 何時生成性能提示。
      }
      // 生產(chǎn)環(huán)境 優(yōu)化打包chunk-vendors.js文件體積過大。
      Object.assign(config.optimization, {
        runtimeChunk: 'single',
        splitChunks: { // 默認(rèn)的splitChunks會全部清空
          chunks: 'all',
          minSize: 20 * 1024 // chunks超過20000bit（20kb）將被單獨打包
          // cacheGroups: { // 對node_modules下的庫單獨打包。暫時先不開啟，可以看看打包體積后決定
          //   vendor: { // 默認(rèn)的vendor.js
          //     test: /[\\/]node_modules[\\/]/, // 匹配映射文件
          //     name (module) {
          //       // get the name. E.g. node_modules/packageName/not/this/part.js
          //       // or node_modules/packageName
          //       const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
          //       // npm package names are URL-safe, but some servers don't like @ symbols
          //       return `npm.${packageName.replace('@', '')}`
          //     }
          //   }
          // }
        }
      })
      // 清除console.log
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true

      // 開啟 gzip 壓縮 文件
      // 注：生成的壓縮文件以.gz為后綴，一般瀏覽器都已支持.gz的資源文件，在http請求的Request Headers 中能看到 Accept-Encoding:gzip。要使服務(wù)器返回.gz文件，還需要對服務(wù)器進(jìn)行配置，根據(jù)Request Headers的Accept-Encoding標(biāo)簽進(jìn)行鑒別，如果支持gzip就返回.gz文件。
      // 服務(wù)器配置參考：https://blog.csdn.net/a1983029606/article/details/115690820
      config.plugins.push(
        new CompressionWebpackPlugin({
          filename: '[path][base].gz',
          algorithm: 'gzip',
          test: productionGzipExtensions,
          threshold: 10240, // 只有大小大于該值的資源會被處理
          minRatio: 0.8 // 只有壓縮率小于這個值的資源才會被處理
        })
      )
    }
  },

  // css相關(guān)配置
  css: {
    loaderOptions: {
      // 啟用less中javascript支持
      less: {
        // less-lorder配置項 詳見 https://www.webpackjs.com/loaders/less-loader/#lessoptions
        javascriptEnabled: true
      }
    }
  },

  // webpack-dev-server 相關(guān)配置
  devServer: {
    host: '0.0.0.0', // ip 本地
    port: 2023, // 設(shè)置端口號
    // inline: true, // 用于設(shè)置代碼保存時是否自動刷新頁面。默認(rèn)：true
    // open: false, //配置自動啟動瀏覽器，默認(rèn)：false
    // hot: true, // 用于設(shè)置代碼保存時是否進(jìn)行熱更新（局部刷新，不刷新整個頁面）。默認(rèn)：true
    // https: false, // 用于設(shè)置是否啟用https，默認(rèn)：false
    proxy: {
      // 設(shè)置代理
      '/api': {
        // 代理名稱   凡是使用/api開頭的地址都是用此代理
        target: 'http://1.2.3.4:5000/', // 需要代理訪問的api地址
        changeOrigin: true // 允許跨域請求
        // pathRewrite: {
        //   // 重寫路徑，替換請求地址中的指定路徑
        //   '^/api': '/' // 將請求地址中的/api替換為空，也就是請求地址中不會包含/api/
        // }
      }
    }
  },
  // 第三方插件配置
  pluginOptions: {}
}

// vue.config.js  
  
module.exports = {  
  // 在這里定義你的自定義配置  
  // 例如，修改默認(rèn)的構(gòu)建輸出目錄  
  build: {  
    outDir: 'dist'  
  }  
}

// vite.config.js  
  
import { defineConfig } from 'vite'  
import vue from '@vitejs/plugin-vue'  
import path from 'path'  
  
// 引用 vue.config.js 文件  
import { vueConfig } from './vue.config.js'  
  
export default defineConfig({  
  plugins: [vue()],  
  // 將 vueConfig 合并到默認(rèn)配置中  
  ...vueConfig,  
  resolve: {  
    alias: {  
      // 在這里添加自定義的別名配置  
    }  
  },  
  build: {  
    // 在這里添加自定義的構(gòu)建配置  
  },  
  // 在這里添加其他 Vite 配置選項  
})