const path = require('path')
 
/** 引入uglifyjs-webpack-plugin */
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 
/** 引入mini-css-extract-plugin */
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
// resolve輔助函數(shù)
function resolve (dir) {
  return path.join(__dirname, dir)
}
 
// 全局編譯公共樣式方案
function addStyleResource (rule) {
  rule.use('style-resource')
    .loader('style-resources-loader')
    .options({
      patterns: [
        path.resolve(__dirname, 'src/stylus/imports.styl'),
      ],
    })
}
 
 
module.exports = {
    runtimeCompiler: true, // Default: false 是否使用包含運(yùn)行時(shí)編譯器的 Vue 構(gòu)建版本。設(shè)置為 true 后你就可以在 Vue 組件中使用 template 選項(xiàng)了，但是這會(huì)讓你的應(yīng)用額外增加 10kb 左右。
    publicPath: './', // 根路徑 cli3.0以上使用publicPath替代baseUrzl,解決build后找不到靜態(tài)資源的問(wèn)題
    productionSourceMap: false, // 如果你不需要生產(chǎn)環(huán)境的 source map，可以將其設(shè)置為 false 以加速生產(chǎn)環(huán)境構(gòu)建。
    lintOnSave: false, // process.env.NODE_ENV === 'development',//是否開(kāi)啟eslint保存檢測(cè) ,它的有效值為 true || false || 'error'
    outputDir: process.env.NODE_ENV === 'production' ? 'build' : 'devbuild', // 打包環(huán)境-文件輸出的目錄名
    productionSourceMap: false, //  是否產(chǎn)生map
    devServer: { // 服務(wù)端設(shè)置
        port: 8080, // 端口
        open: false, // 啟動(dòng)項(xiàng)目后自動(dòng)開(kāi)啟瀏覽器
        overlay: { // 設(shè)置讓瀏覽器 overlay 同時(shí)顯示警告和錯(cuò)誤
          warnings: false,
          errors: false
        },
        // 請(qǐng)求代理
        proxy: {
          '/api': {
            target: 'http://0.0.0.0:8085', // 代理地址，這里設(shè)置的地址會(huì)代替axios中設(shè)置的baseURL
            ws: false, // proxy websockets
            changeOrigin: true, // 如果接口跨域，需要進(jìn)行這個(gè)參數(shù)配置
            pathRewrite: { 
              '/api': ''
            }
          },
        }
    },
    // 基于環(huán)境有條件地配置行為
    configureWebpack: config => {
        // 線上版本
        if (process.env.NODE_ENV === 'production') {
          // 為生產(chǎn)環(huán)境修改配置
          config.mode = 'production';
          /** 移除console */
          config.optimization.minimizer.push(
            new UglifyJsPlugin({
              uglifyOptions: {
                warnings: false,
                compress: {
                  drop_console: true,
                  drop_debugger: true,
                  pure_funcs: ['console.log'] 
                }
              }
            })
          )
        } else {
          // 為開(kāi)發(fā)環(huán)境修改配置
          config.mode = 'development'
        }
        Object.assign(config, {
          // 開(kāi)發(fā)生產(chǎn)共同配置
          resolve: {
            extensions: ['.js', '.vue', '.json'],  // 引入時(shí)可省略擴(kuò)展名
            alias: {                               // 自定義別名
              '@': path.resolve(__dirname, './src')
            }
          }
        })
    },
    // css相關(guān)配置
    css: {
      extract: false, // 是否使用css分離插件 ExtractTextPlugin (默認(rèn)生產(chǎn)為true，開(kāi)發(fā)為false)
      sourceMap: false, // 開(kāi)啟 CSS source maps?
      loaderOptions: {
        css: {}, // 這里的選項(xiàng)會(huì)傳遞給 css-loader 
      }, // css預(yù)設(shè)器配置項(xiàng)
      modules: false // 啟用 CSS modules for all css / pre-processor files.
    },
    // 對(duì)webpack內(nèi)部配置進(jìn)行顆粒度的修改
    chainWebpack: config => {
 
        // 修復(fù)HRM 
        config.resolve.symlinks(true)
 
        // 打包代碼分割
        config.optimization.splitChunks({
          chunks: "all",          //async異步代碼分割 initial同步代碼分割 all同步異步分割都開(kāi)啟
          minSize: 30000,         //字節(jié) 引入的文件大于30kb才進(jìn)行分割
          //maxSize: 50000,         //50kb，嘗試將大于50kb的文件拆分成n個(gè)50kb的文件
          minChunks: 1,           //模塊至少使用次數(shù)
          maxAsyncRequests: 5,    //同時(shí)加載的模塊數(shù)量最多是5個(gè)，只分割出同時(shí)引入的前5個(gè)文件
          maxInitialRequests: 3,  //首頁(yè)加載的時(shí)候引入的文件最多3個(gè)
          automaticNameDelimiter: '~', //緩存組和生成文件名稱之間的連接符
          name: true,                  //緩存組里面的filename生效，覆蓋默認(rèn)命名
          cacheGroups: { //緩存組，將所有加載模塊放在緩存里面一起分割打包
            default: { //默認(rèn)打包模塊
              priority: -20,
              reuseExistingChunk: true, //模塊嵌套引入時(shí)，判斷是否復(fù)用已經(jīng)被打包的模塊
              filename: 'common.js'
            },
            elementUi: {
              name: 'chunk-elementUi',
              test: /[\\/]node_modules[\\/]_?element-ui(.*)/,
              priority: 20
            }
          }
        })
 
        // 抽離css支持按需加載
        let miniCssExtractPlugin = new MiniCssExtractPlugin({
          filename: 'assets/[name].[hash:8].css',
          chunkFilename: 'assets/[name].[hash:8].css'
        })
        config.plugin('extract-css').use(miniCssExtractPlugin)
 
        // 移除 preload 插件 （去除默認(rèn)預(yù)加載）
        config.plugins.delete('preload')
 
        // 移除 prefetch 插件 （去除默認(rèn)預(yù)加載）
        config.plugins.delete('prefetch')
 
        // 全局引入stylus方法
        const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
        types.forEach(type => addStyleResource(config.module.rule('stylus').oneOf(type)))
 
        // 配置svg規(guī)則排除icons目錄中svg文件處理
        config.module
          .rule('icons')
          .test(/\.svg$/)
          .include.add(resolve('src/icons'))
          .end()
          .use('svg-sprite-loader')
          .loader('svg-sprite-loader')
          .options({
            symbolId: 'icon-[name]'
         })
       
        // 配置vue規(guī)則
        config.module
          .rule('vue')
          .use('vue-loader')
          .loader('vue-loader')
            .tap(options => {
              // 修改它的選項(xiàng)
              return options
            })
 
        // 開(kāi)啟gzip壓縮
        if (config.productionGzip) {
              const CompressionWebpackPlugin = require('compression-webpack-plugin')
              // 增加瀏覽器CPU（需要解壓縮）， 減少網(wǎng)絡(luò)傳輸量和帶寬消耗 （需要衡量，一般小文件不需要壓縮的）
              // 圖片和PDF文件不應(yīng)該被壓縮，因?yàn)樗麄円呀?jīng)是壓縮的了，試著壓縮他們會(huì)浪費(fèi)CPU資源而且可能潛在增加文件大小。
              config.plugins.push(
                new CompressionWebpackPlugin({
                  asset: '[path].gz[query]',
                  algorithm: 'gzip',
                  test: /\.(js|css)$/,
                  threshold: 10240, // 達(dá)到10kb的靜態(tài)文件進(jìn)行壓縮 按字節(jié)計(jì)算
                  minRatio: 0.8, // 只有壓縮率比這個(gè)值小的資源才會(huì)被處理
                  deleteOriginalAssets: false // 使用刪除壓縮的源文件
                })
              )
        }
 
        //壓縮圖片
         config.module
          .rule('images')
          .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
          .use('image-webpack-loader')
            .loader('image-webpack-loader')
            .options({
              bypassOnDebug: true
            })
            .end()
    }
}