Duplicated code output by DefinePlugin #3421

Closed
mytharcher opened this Issue Dec 5, 2016 · 3 comments

Comments

Projects
None yet
3 participants
@mytharcher

What is the current behavior?

When I using DefinePlugin to inject process.env variable into the package, the output file will contain hundreds of duplicated the variable object (in everywhere the code use it) like this:

{NODE_ENV:"production"}.NODE_ENV

Even I activated the --optimize-dedupe argument it still happens.

If the current behavior is a bug, please provide the steps to reproduce.

Just try this configuration:

new webpack.DefinePlugin({
	'process.env': JSON.stringify({
		NODE_ENV: process.env.NODE_ENV
	})
})

What is the expected behavior?

I am expecting any variable injected by DefinePlugin should only present once in the output code as an internal module. And when any usage of the variables it could just be like a requirement.

Because if it act like current, the size of output file will be very huge with several injected variables.

Hope you could help on this.

@Kovensky

This comment has been minimized.

Show comment
Hide comment
@Kovensky

Kovensky Dec 5, 2016

Collaborator

If the DefinePlugin definition's value is a string, it is treated as replacement code. The process.env token is being literally replaced with the result of the JSON.stringify.

The JSON.stringify should be in the process.env.NODE_ENV value to ensure it gets inserted in the code as a string (instead of as an identifier).

new webpack.DefinePlugin({
  'process.env': {
    'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
  }
})

This will replace the process.env.NODE_ENV token with the result of JSON.stringify(process.env.NODE_ENV).

Collaborator

Kovensky commented Dec 5, 2016

If the DefinePlugin definition's value is a string, it is treated as replacement code. The process.env token is being literally replaced with the result of the JSON.stringify.

The JSON.stringify should be in the process.env.NODE_ENV value to ensure it gets inserted in the code as a string (instead of as an identifier).

new webpack.DefinePlugin({
  'process.env': {
    'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
  }
})

This will replace the process.env.NODE_ENV token with the result of JSON.stringify(process.env.NODE_ENV).

@zhaoshengjun

This comment has been minimized.

Show comment
Hide comment
@zhaoshengjun

zhaoshengjun Dec 5, 2016

Contributor

I think the correct way to do it is

new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
  }
})

The reason is if you use process.env, it will remove everything else and only leave the keys you specified. In this case, it is NODE_ENV. But if you use process.env.NODE_ENV, it will only update the NODE_ENV part and leave the rest of process.env untouched.

Also in your example, I assume that you have defined the process.env.NODE_ENV in somewhere else, possibly in the npm script. Otherwise, it will become undefined.

Contributor

zhaoshengjun commented Dec 5, 2016

I think the correct way to do it is

new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
  }
})

The reason is if you use process.env, it will remove everything else and only leave the keys you specified. In this case, it is NODE_ENV. But if you use process.env.NODE_ENV, it will only update the NODE_ENV part and leave the rest of process.env untouched.

Also in your example, I assume that you have defined the process.env.NODE_ENV in somewhere else, possibly in the npm script. Otherwise, it will become undefined.

@mytharcher

This comment has been minimized.

Show comment
Hide comment
@mytharcher

mytharcher Dec 6, 2016

Thanks for your answer. I used this plugin for combined several variables (from .env file) into an object before like this:

new webpack.DefinePlugin({
  'process.env': JSON.stringify(process.env)
})

And this brought a very huge output file (more than 5MB).

After your explanation, I realized the best practice for using this plugin is defining each single variable separately.

Thanks very much!

Thanks for your answer. I used this plugin for combined several variables (from .env file) into an object before like this:

new webpack.DefinePlugin({
  'process.env': JSON.stringify(process.env)
})

And this brought a very huge output file (more than 5MB).

After your explanation, I realized the best practice for using this plugin is defining each single variable separately.

Thanks very much!

@mytharcher mytharcher closed this Dec 6, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment