title | sort | contributors | related | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Environment Variables |
8 |
|
|
To disambiguate in your webpack.config.js
between development and production builds you may use environment variables.
T> webpack's environment variables are different from the environment variables of operating system shells like bash
and CMD.exe
The webpack command line environment option --env
allows you to pass in as many environment variables as you like. Environment variables will be made accessible in your webpack.config.js
. For example, --env.production
or --env.NODE_ENV=local
(NODE_ENV
is conventionally used to define the environment type, see here.)
webpack --env NODE_ENV=local --env production --progress
T> Setting up your env
variable without assignment, --env production
sets --env production
to true
by default. There are also other syntaxes that you can use. See the webpack CLI documentation for more information.
There is one change that you will have to make to your webpack config. Typically, module.exports
points to the configuration object. To use the env
variable, you must convert module.exports
to a function:
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'),
},
};
};