vue-cli文檔
1.webpack-chain

1.定義

• 通過鏈式調用操作webpack 配置對象。(chain：鏈子) 直接修改配置對象
• chainWebpack 通過鏈式編程的形式，來修改默認的 webpack 配置

2.包含的對象ChainedMap和ChainSet

1.ChainedMap

// 1、從 Map 移除所有 配置
clear()

// 2、通過鍵值從 Map 移除單個配置
delete(key)

// 3、獲取 Map 中相應鍵的值
// 注意：返回值是該 key 對應的值
get(key)

// 4、獲取 Map 中相應鍵的值
// 如果鍵在 Map 中不存在，則 ChainedMap 中該鍵的值會被配置為 fn 的返回值.
// 注意：返回值是該 key 對應的值，或者 fn 返回的值
getOrCompute(key, fn)

// 5、配置 Map 中 已存在的鍵的值
set(key, value)

// 6、Map 中是否存在一個配置值的特定鍵，
// 注意：返回 boolean
has(key)

// 7、返回 Map 中已存儲的所有值的數組
// 注意：返回 Array
values()

// 8、返回 Map 中全部配置的一個對象, 其中 鍵是這個對象屬性，值是相應鍵的值，
entries()

// 9、 提供一個對象，這個對象的屬性和值將 映射進 Map
merge(obj, omit)

// 10、對當前配置上下文執行函數 handler
batch(handler)

// 11、條件執行一個函數去繼續配置
// condition: Boolean
// whenTruthy: 當條件為真，調用把 ChainedMap 實例作為單一參數傳入的函數
// whenFalsy: 當條件為假，調用把 ChainedMap 實例作為單一參數傳入的函數
when(condition, whenTruthy, whenFalsy) 

2.ChainSet

// 末尾增加一個值
add(value)
// 在開始位置增加一個值
prepend(value)
// 清空 set 內容
clear()
// 刪除某個值
delete(value)
// 判斷是否有某個值
has(value)
// 返回值列表
values()
// 合并給定的數組到 Set 尾部。
merge(arr)
// handler: ChainSet => ChainSet
// 一個把 ChainSet 實例作為單個參數的函數
batch(handler)
// condition: Boolean
// whenTruthy: ChainSet -> any, 條件為真時執行
// whenFalsy: ChainSet -> any, 條件為假時執行
when(condition, whenTruthy, whenFalsy) 

3.常用方法

1. toString() 調試

config
  .module
    .rule('compile')
      .test(/\.js$/)
      .use('babel')
        .loader('babel-loader');

config.toString();

// 轉換后的輸出
{
  module: {
    rules: [
      /* config.module.rule('compile') */
      {
        test: /\.js$/,
        use: [
          /* config.module.rule('compile').use('babel') */
          {
            loader: 'babel-loader'
          }
        ]
      }
    ]
  }
}
 

2. toConfig()導出配置

const Config = require('webpack-chain');
const config = new Config();
console.log(config.toConfig()) 

3. proxy代理

chainWebpack: config => {
    config.devServer.port(8888)
      .open(true)
      .proxy({'/dev': {
                 target: 'http://127.0.0.1:80/',
                 changeOrigin: true,
                 pathRewrite: {
                   '^/dev': ''
                 }
               }
           })
  }
// chain其他隊proxy的配置
config.devServer
  .host(host)
  .hot(hot)
  .hotOnly(hotOnly)
  .port(port)
  .progress(progress)
  .proxy(proxy)
  .public(public)
  .publicPath(publicPath)
 

4. loader

// 配置一個新的 loader
config.module
.rule('babel')
.test(/\.(js|jsx|mjs|ts|tsx)$/)
.include
  .add(path.resolve(__dirname,  'src'))
  .end()
.use('babel-loader')
  .loader('babel-loader')
  .options({
    'presets':['@babel/preset-env']
  })

// 等同于以下 webpack 配置
module: {
  rules: [
    {
      test: /\.(js|jsx|mjs|ts|tsx)$/,
      include: [
        path.resolve(__dirname,  'src')
      ],
      use: [
        {
          loader: 'babel-loader',
          options: {
              presets: [
                '@babel/preset-env'
              ]
            }
        }
      ]
    }
  ]
} 

//修改loader
config.module
  .rule('ts')
  .test(/\.tsx?/)
  .use('ts-loader')
    .loader('ts-loader')
    .tap(option => {
      // 一系列
      return options;
    })
    .end()
    
 //移除loader
 config.module
  .rule('ts')
  .test(/\.tsx?/)
  .uses.delete('ts-loader')
    

5. plugin

    //新增
    //gzip壓縮 
    const CompressionWebpackPlugin = require('compression-webpack-plugin');
    const productionGzipExtensions = ['js', 'css'];
    config.plugin('CompressionWebpackPlugin').use(CompressionWebpackPlugin, [
      {
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), // 匹配文件名
        threshold: 10240, // 對超過10K的數據進行壓縮
        minRatio: 0.8, // 極小比
      }
    ]);
   //等價于
    module.exports = { 
    plugins:
        [new CompressionPlugin(
            {
                filename: '[path].gz[query]',
                algorithm: 'gzip',
                test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), // 匹配文件名
                threshold: 10240, // 對超過10K的數據進行壓縮
                minRatio: 0.8, // 極小比
          }
        )
       ] }; 
       
       
//移除
config.plugins.delete('CompressionWebpackPlugin')

//插入
const htmlWebpackPlugin = require('html-webpack-plugin');
config.plugin('html')
  .use(htmlWebpackPlugin)
  .before('extract')
  
// 使用 tap 方法修改參數
config
  .plugin(name)
  .tap(args => newArgs)
  
  

6. 條件判斷

  config
      .when(process.env.NODE_ENV === 'development', //如果是開發環境
        config => {
            //在條件里配置 config
        }
     )

4. vue-cli 中的chain配置

const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin');

module.exports = {
    publicPath: '/',
    outputDir: 'dist',
    assetsDir: 'static',
    productionSourceMap: false,
    devServer: {
      port: port,
      open: true,
      overlay: {
        warnings: false,
        errors: true
      },
      proxy: {
        "/api/": {
          target: "http://127.0.0.1:7001",
          changeOrigin: true,
          pathRewrite: {
            '^/api': ""
          }
        },
      }
    },
    configureWebpack: {
      name: name,
      resolve: {
        alias: {
          '@': resolve('src')
        }
      },
      externals: cdn.externals,
    },
    chainWebpack(config) { //這里使用的是 vue-cli自帶的 webpackchain
     
    config.plugin('define').tap(args => {//新增環境變量
      args[0]['process.env'].BUILD_ENV = JSON.stringify(process.env.BUILD_ENV)
      return args
    }) 
    //打開gzip 直接執行
    const productionGzipExtensions = ['js', 'css'];
    config.plugin('CompressionWebpackPlugin').use(CompressionWebpackPlugin, [
        {
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), // 匹配文件名
        threshold: 10240, // 對超過10K的數據進行壓縮
        minRatio: 0.8, // 極小比
        }
    ]);

      //當滿足條件執行
      config
      .when(process.env.NODE_ENV === 'production',
        config => {
          config
            .plugin('ScriptExtHtmlWebpackPlugin')
            .after('html')
            .use('script-ext-html-webpack-plugin', [{
              inline: /runtime\..*\.js$/
            }])
            .end()
         //分片優化
          config
            .optimization.splitChunks({
              chunks: 'all',
              cacheGroups: {
                libs: {
                  name: 'chunk-libs',
                  test: /[\\/]node_modules[\\/]/,
                  priority: 10,
                  chunks: 'initial'
                },
                commons: {
                  name: 'chunk-commons',
                  test: resolve('src/components'), // can customize your rules
                  minChunks: 3, //  minimum common number
                  priority: 5,
                  reuseExistingChunk: true
                }
              }
            })
        }
      )//條件結束
      
    }//chain配置結束

}

2.configureWebpack

configureWebpack 通過操作對象的形式，來修改默認的 webpack 配置，該對象將會被 webpack-merge 合并入最終的 webpack 配置。

const path = require('path');
function resolve (dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  devServer: {
    ...
  }, 
  lintOnSave: false, // eslint-loader 是否在保存的時候檢查
  productionSourceMap: false, // 生產環境是否生成 sourceMap 文件
  filenameHashing: true, //文件hash
  configureWebpack: config => {
    if (isProduction) {
      ...
    } else {
      ...
    }
    //返回一個將要合并的對象
    return {
      resolve: {
        alias: {
          '@asset':resolve('src/assets')
        }
      }
    } 
  }
}