CODEWITHSUNDEEP
npmwebpackprocess
Linx
Linx

Reputation: 763

Custom global process.env variable with Webpack build

I have a Vue application that's compiled using Webpack. I'm trying to add a variable into the 'npm run dev' command that I can then use globally throughout the project. Currently, I am running 'npm --brand=foo run dev' and consoling 'process.env.brand' in the build.js file returns 'foo'. Now I need to make this available to the rest of the project. Here is my setup:

WEBPACK.DEV.CONF.JS

var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')

module.exports = merge(baseWebpackConfig, {
  plugins: [
    new webpack.DefinePlugin({
      'process.env': config.dev.env
    })
})

DEV.ENV.JS

var merge = require('webpack-merge')
var prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"'
})

File structure is Build/build.js + webpack.dev.conf.js and Config/dev.env.js. I tried to add a 'brand' property like the following, but process.env.brand was undefined in this file.

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  brand: process.env.brand
})

Upvotes: 1

Views: 1958

Answers (1)

The.Bear
The.Bear

Reputation: 5855

UPDATE by @Linx to pass the argument dynamically directly from command line

Run the command and pass in the variable like: npm --brand=foo run dev
Then, variable is then available in the webpack config file as process.env.npm_config_brand.

Another option is to setting the variable inside the npm script section:

package.json

{
  //...
  "scripts": {
    "dev": "SET brand=foo& webpack -p"
},

If you are using linux, maybe you should remove the SET --> "dev": "brand=foo& webpack -p"

Then run the command like: npm run dev

In both cases, to make it available for the rest of the project you can use webpack.DefinePlugin

module.exports = {
    //...
    plugins: [
        new webpack.DefinePlugin({
            '__BRAND__': process.env.brand,
        })
    ]
}

The variable will be accessible in the rest of the project like: console.log(__BRAND__);

Upvotes: 1

Related Questions