module.exports = {
  // 配置開發(fā)服務(wù)器
  devServer: {
    // 指定開發(fā)服務(wù)器的主機(jī)名，默認(rèn)為 localhost
    host: 'localhost',
    // 指定開發(fā)服務(wù)器的端口號(hào)，默認(rèn)為 8080
    port: 8080,
    // 啟用 HTTPS，默認(rèn)為 false
    https: false,
    // 配置開發(fā)服務(wù)器的代理
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  // 配置公共路徑
  publicPath: '/',
  // 是否在構(gòu)建時(shí)生成 source map，默認(rèn)為 false
  productionSourceMap: false,
  // 配置 CSS
  css: {
    // 啟用 CSS modules
    requireModuleExtension: true,
    // 是否使用 CSS 預(yù)處理器 loader
    loaderOptions: {
      sass: {
        prependData: `@import "@/styles/variables.scss";`
      }
    }
  },
  // 配置 Babel
  transpileDependencies: [
    /* string or regex */
  ],
  // 配置插件
  pluginOptions: {
    // ...
  },
  // 配置 webpack
  configureWebpack: {
    // ...
  },
  // 配置 Webpack Dev Server 的選項(xiàng)
  devServer: {
    // ...
  }
};

'use strict'
const path = require('path')
// 輔助函數(shù) resolve，它接受一個(gè)路徑參數(shù) dir，并返回該路徑相對(duì)于當(dāng)前文件所在目錄的絕對(duì)路徑
function resolve (dir) {
  return path.join(__dirname, dir)
}
// 引入了用于壓縮文件的 webpack 插件 compression-webpack-plugin，它能夠在打包時(shí)對(duì)文件進(jìn)行 gzip 壓縮
const CompressionWebpackPlugin = require('compression-webpack-plugin')
// 定義了一個(gè)變量 IS_PROD，它根據(jù)當(dāng)前環(huán)境變量 NODE_ENV 的值來判斷是否為生產(chǎn)環(huán)境
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
// 正則表達(dá)式，用于匹配需要進(jìn)行 gzip 壓縮的文件類型
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i
// 導(dǎo)出了整個(gè)配置對(duì)象，使其可以被 webpack 使用
module.exports = {
  publicPath: './',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false,
  css: {
    loaderOptions: {
      // 給 sass-loader 傳遞選項(xiàng)
      sass: {
        // 所以這里假設(shè)你有 `src/variables.scss` 這個(gè)文件
        data: '@import "@/assets/css/variables.scss";'
      }
    }
  },
  configureWebpack: config => {
  	// 定義一個(gè)空數(shù)組，用于存放Webpack插件
    const plugins = []
    // 如果是生產(chǎn)環(huán)境，添加以下插件配置
    if (IS_PROD) {
      plugins.push(
        new CompressionWebpackPlugin({ // 使用CompressionWebpackPlugin插件進(jìn)行g(shù)zip壓縮
          filename: '[path].gz[query]', // 指定壓縮后文件的名稱格式
          algorithm: 'gzip', // 指定壓縮算法為gzip
          test: productionGzipExtensions, // 指定要壓縮的文件類型
          threshold: 10240, // 只有文件大小大于10KB才會(huì)被壓縮
          minRatio: 0.8 // 只有壓縮率達(dá)到0.8以上的文件才會(huì)被壓縮
        })
      )
      // 開啟分離js，配置Webpack的優(yōu)化選項(xiàng)
      config.optimization = {
        runtimeChunk: 'single', // 將runtime代碼單獨(dú)提取為一個(gè)chunk
        splitChunks: { // 配置分割代碼塊的規(guī)則
          chunks: 'all', // 選擇所有類型的chunk進(jìn)行優(yōu)化
          maxInitialRequests: Infinity, // 允許的最大初始請(qǐng)求數(shù)，Infinity表示無限制
          minSize: 20000, // 每個(gè)代碼塊的最小大小，小于該值的模塊不會(huì)被提取
          cacheGroups: { // 定義緩存組
            vendor: { // 緩存組的名稱為vendor
              test: /[\\/]node_modules[\\/]/,  // 匹配條件，node_modules目錄下的模塊
              name (module) { // 模塊名稱的生成規(guī)則
                const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1] // 獲取模塊名稱
                return `npm.${packageName.replace('@', '')}` // 返回以npm.開頭的模塊名稱，@符號(hào)替換為空字符串
              }
            }
          }
        }
      };
    }
    // 將定義的插件數(shù)組合并到Webpack配置中的插件數(shù)組中
    config.plugins = [...config.plugins, ...plugins];
  },
  chainWebpack (config) {
    // 刪除 webpack 中的預(yù)加載和預(yù)獲取資源的插件
    // 這些插件通常會(huì)在項(xiàng)目中引入一些未使用的資源，對(duì)于一些性能要求較高的項(xiàng)目，可能希望移除這些插件以減少無用資源的加載。
    config.plugins.delete('preload') // TODO: need test
    config.plugins.delete('prefetch') // TODO: need test
    // 將入口文件配置為包含了 Babel polyfill 的 main.js 文件
    config.entry.app = ['@babel/polyfill', './src/main.js']
    // 設(shè)置了一個(gè)別名 @，指向項(xiàng)目中的 src 目錄
    // 在代碼中引用文件時(shí)就可以使用 @ 代替 src
    config.resolve.alias
      .set('@', resolve('src'))
      .end()
    // 如果是開發(fā)環(huán)境，則調(diào)用 config.devtool('cheap-source-map') 方法來配置 devtool 選項(xiàng)，以生成方便調(diào)試的源映射文件
    config
      .when(process.env.NODE_ENV === 'development',
        config => config.devtool('cheap-source-map')
      )
    // 圖片處理規(guī)則
    config.module
      .rule('images')
      .test(/\.(woff2?|eot|ttf|otf|png|jpe?g|gif|svg)(\?.*)?$/) // 匹配圖片文件的文件名后綴
      .use('url-loader') // 使用 url-loader 加載器處理圖片文件
      .loader('url-loader')
      .options({
        limit: 80000, // 小于 80000 字節(jié)的圖片轉(zhuǎn)換為 base64 編碼的 Data URL
        esModule: false // 禁用 ES 模塊語法
      })
      if (IS_PROD) {
        config.module
          .rule('images')
          .test(/\.(woff2?|eot|ttf|otf|png|jpe?g|gif|svg)(\?.*)?$/)
          .use('image-webpack-loader') // 用于優(yōu)化圖片文件
          .loader('image-webpack-loader')
          .options({
            mozjpeg: { progressive: true, quality: 65 },
            optipng: { enabled: false },
            pngquant: { quality: [0.65, 0.9], speed: 4 },
            gifsicle: { interlaced: false }
          })
      }
  }
}