For multi-person collaborative projects, every time you publish online, you may not know if the code you’re submitting is catching the train. After reading this article, everything is under control.

First, open a single JS file that contains information about the release. For example, I need to know the time of each build project:

//info.js
const moment = require('moment');

process.env.APP_TIME = moment().format('YYYY-MM-DD(dddd) HH:mm:ss');

// You can also join the branch version of the project now issued... Information such as
Copy the code

Then, using the vue project as an example, in vue.config.js, the file is introduced. Vue-cli has built-in html-webpack-plugin. The index.html file is a template that is processed by htMl-webpack-plugin. The client environment variables can be used directly.

require('./info.js');
/ /...

module.exports = {
    / /...
    chainWebpack: (config) = > {
      config.plugin('html').tap((options) = > {
        var args = [...options];
        args[0].filename = 'index.html';
        args[0].template = path.join(__dirname, './ Where your entry index.html is located /index.html'),
        args[0].minify = { ... options[0].minify,
          removeComments: false};returnargs; }})},Copy the code

Ejs-loader is used by default if no loader is specified for the template file. For example, if template: ‘./index.html’ does not specify any loader for.html, use ejs-loader.

Add code to the head of index. HTML:

<! -- <%= process.env.APP_TIME %> -->
Copy the code

At compile time, the ejS-loader replaces the variable here and prints the time when the package was compiled:

<! DOCTYPEhtml>
<html>
  <head>
    <! - the 2021-11-25 08:30:01 -- -- >
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
  </head>
  <body>
  </body>
</html>
Copy the code

Finally, you can tell if your code has been deployed by comparing the time your code push took.