Mistj's Digital Garden

Appearance

Webpack之DefinePlugin

需求： 使前端F12时出现当前打包的Tag和哈希值。

将用到的webpack中的 DefinePlugin。

Vue脚手架下，需要特殊配置:

js
const commitHash = require('child_process')  
  .execSync('git rev-parse --short HEAD')  
  .toString()  
  .trim();  
const currentTags = require('child_process')  
  .execSync('git tag --points-at HEAD')  
  .toString()  
  .replace('\n', '  、  ')  
  .trim();

//.... vue.config.js
config.plugin('define').tap(args => {  
  Object.assign(args[0]['process.env'], {  
    COMMIT_HASH: `"${commitHash}"`,  
    PACKAGE_TIME: `"${packageTime}"`,  
    CURRENT_TAGS: `"${currentTags}"`  
  });  
  return args;  
});
const commitHash = require('child_process')  
  .execSync('git rev-parse --short HEAD')  
  .toString()  
  .trim();  
const currentTags = require('child_process')  
  .execSync('git tag --points-at HEAD')  
  .toString()  
  .replace('\n', '  、  ')  
  .trim();

//.... vue.config.js
config.plugin('define').tap(args => {  
  Object.assign(args[0]['process.env'], {  
    COMMIT_HASH: `"${commitHash}"`,  
    PACKAGE_TIME: `"${packageTime}"`,  
    CURRENT_TAGS: `"${currentTags}"`  
  });  
  return args;  
});

变量会直接放到 process.env 里面，然后再合适的地方进行打印输出即可。

在vue.config.js的configureWebpack配置DefinePlugin，不起作用 · Issue #3279 · vuejs/vue-cli

如何在webpack中使用DefinePlugin注入全局变量 · Issue #1671 · vuejs/vue-cli
git - How to get tags on current commit - Stack Overflow