webpack Environment Variables

https://webpack.js.org/guides/environment-variables/

webpack Environment Variables

 webpack.config.js

const path = require('path');

module.exports = env => {
  // Use env.<YOUR VARIABLE> here:
  console.log('NODE_ENV: ', env.NODE_ENV); // 'local'
  console.log('Production: ', env.production); // true

  return {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };
};

index.js

function component() {
  let element = document.createElement('div');

  // Lodash, currently included via a script, is required for this line to work
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());
C:\Users\ZiGoo\webpack-demo>webpack --env.NODE_ENV=local --env.production --progress
NODE_ENV:  local
Production:  true
Hash: f871d07878af5c67e9d1
Version: webpack 4.27.1
Time: 488ms
Built at: 2018-12-18 15:37:46
    Asset      Size  Chunks             Chunk Names
bundle.js  1.03 KiB       0  [emitted]  main
Entrypoint main = bundle.js
[0] ./src/index.js 280 bytes {0} [built]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

C:\Users\ZiGoo\webpack-demo>