node-env-webpack-plugin

> Simplified NODE_ENV handling with webpack

Install

``sh
npm install node-env-webpack-plugin
`

Usage

`diff
import path from 'node:path';
+ import NodeEnvPlugin from 'node-env-webpack-plugin';

- const NODE_ENV = process.env.NODE_ENV || 'development';
- const isProduction = NODE_ENV === 'production';

module.exports = {
entry: './source',
output: {
path: path.join(__dirname, 'distribution'),
filename: 'bundle.js'
},
- devtool: isProduction ? 'source-map' : 'cheap-module-source-map',
+ devtool: NodeEnvPlugin.devtool,
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}
]
},
plugins: [
- new webpack.EnvironmentPlugin({
- NODE_ENV: 'development'
- }),
+ new NodeEnvPlugin()
]
};
`

API

Sets process.env.NODE_ENV in the Node.js process to development at import-time if it's not defined, or production if webpack is run with webpack -p.

$3

Sets process.env.NODE_ENV in the bundle to the same as in the Node.js process.

$3

For convenience and to prevent typos.

process.env.NODE_ENV === 'production'

$3

process.env.NODE_ENV === 'development'

$3

process.env.NODE_ENV === 'test'

$3

Pass this to the webpack devtool option. It will give you good but slow source maps in production (source-map) and fast source maps in development (cheap-module-source-map`).

Related

- add-asset-webpack-plugin - Dynamically add an asset to the webpack graph