Env-info-webpack-plugin NPM

env-info-webpack-plugin

Webpack plugin for generates building and env information.

Getting started

Install with npm:

npm i --save-dev env-info-webpack-plugin

Install with yarn:

yarn add --dev env-info-webpack-plugin

Prerequisites

webpack

Usage

Enable plugin in your webpack.config.js file:

const EnvInfoPlugin = require('env-info-webpack-plugin')

module.exports = {
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js',
  },
  plugins: [new EnvInfoPlugin()],
}

2 Output info into console in your entry file, eg: app.js:

console.log(BUILD_INFO) // BUILD_INFO will be replaced with env info when building with webpack.

console.log(
  `%c${BUILD_INFO.name}%cv${BUILD_INFO.version}`,
  'background: #35495e; color: #fff; padding: 2px 4px; border-radius: 3px 0 0 3px;',
  'background: #19be6b; color: #fff; padding: 2px 4px; border-radius: 0 3px 3px 0;'
) // Output with colorful support.

/*

BUILD_INFO => {
  name: 'Your Project Name',
  version: '0.1.0',
  time: '2019-05-27T15:49:46.162Z',
  hash: '035d7e36be302121871cf907e292269071a0c2f4',
}

*/

If you are using vue-cli

// 1. Working with Webpack in vue.config.js
const EnvInfoPlugin = require('env-info-webpack-plugin')

module.exports = {
  // ...Your own config.

  configureWebpack: {
    plugins: [new EnvInfoPlugin()],
  },
}

// 2. Output info in main.js
console.log(
  `%c${BUILD_INFO.name}%cv${BUILD_INFO.version}`,
  'background: #35495e; color: #fff; padding: 2px 4px; border-radius: 3px 0 0 3px;',
  'background: #19be6b; color: #fff; padding: 2px 4px; border-radius: 0 3px 3px 0;'
) // Output with colorful support.