feat: built in env files support

[burhanuday]

What kind of change does this PR introduce?

feature

Adds built in support to webpack to handle .env files

Did you add tests for your changes?
not yet

If relevant, did you update the documentation?
not yet

Summary

Closes #3747

Does this PR introduce a breaking change?

No

Other information

[alexander-akait]

I think we should implement this as a plugin, so developers can reuse it, we need to impement this as a package, but I am fine with starting it as a plugin inside webpack-cli package, the main idea get https://github.com/mrsteele/dotenv-webpack/blob/master/src/index.js and rework it:

• allow to set custom logic for loading dotenv files (by default we will use the same as you written)
• allow to set multiple prefix, because you can have ESM and common js files in projects, we need to allow set import.meta.env and process.env
• no silent, webpack has built-in logger, so let's use it
• implement cache to avoid extra reading

and maybe other tweeak, yeah, the issue is not small (and not so big), so we can do it step by step

[burhanuday]

Creating a new folder under packages. packages/environment-variables-webpack-plugin. Does this name work?

[alexander-akait]

Let's take dovenv-webpack-plugin

[burhanuday]

@alexander-akait if we do want to distribute it as a standalone plugin in the future, isnt it better to add it to the webpack codebase or put it under webpack-contrib org? creating it as a plugin here and then moving it to a different repo to distribute it additional unnecessary work
if we want this to be an inbuilt feature in webpack then lets add it to webpack repo or if its going to be an installable plugin then lets create a new repo under the contrib org?

[alexander-akait]

@burhanuday That's right, we can do it this way, but I'd rather keep it here for better integration with CLI (i.e. allows to have special flags for this) and fast fixes and fast releases, not sure it really make sense to use it as standalone plugin (except complex cases)

[burhanuday]

Okay. Creating new package here then

[alexander-akait]

The main goal is a seamless integraiton, moving it and rename is not long task, implementation is the most long task

[codecov]

Codecov Report

Merging #3759 (ccf341e) into master (78f57d1) will increase coverage by 0.13%.
The diff coverage is 99.04%.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #3759      +/-   ##
==========================================
+ Coverage   91.64%   91.77%   +0.13%     
==========================================
  Files          22       23       +1     
  Lines        1628     1776     +148     
  Branches      466      505      +39     
==========================================
+ Hits         1492     1630     +138     
- Misses        136      146      +10     

Impacted Files	Coverage Δ
packages/webpack-cli/src/webpack-cli.ts	92.54% <95.00%> (-0.51%)	⬇️
packages/dotenv-webpack-plugin/src/index.js	100.00% <100.00%> (ø)

... and 5 files with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 78f57d1...ccf341e. Read the comment docs.

[burhanuday]

since env param in the cli is already taken, what should we use for passing array of env file names in the cli?
does env-file work?

[alexander-akait]

Let's allow it to be string | string[], some env variables can be from other environments, for example SENTRY_ (error reporting) requre prefix SENTRY_, and it can be used in client, so you can have ["PUBLIC_", "SENTRY_"]

[alexander-akait]

Also I deeply look at dotenv-plugin and what we missing:

• allowEmptyValues, we really need it, it allows to catch bad cases
• let's add test case for const { DB_HOST, DB_PASS } = process.env; (we supports it in webpack, just to check it), same for import.meta

And I still think safe is good idea, but we can postpone it

Good job, thank you, I think we will merge/release it on this week

[burhanuday]

• let's add test case for const { DB_HOST, DB_PASS } = process.env; (we supports it in webpack, just to check it), same for import.meta

@alexander-akait

In this plugin we are defining the variables using string like "process.env.varname":"value" and not the object syntax. Object syntax would be required for the above test case to pass.

While figuring this out, i was reading the webpack docs for define plugin and saw that this is recommended against doing in a note on this link - https://webpack.js.org/plugins/define-plugin/#usage

Other than that, i have implemented allowEmptyValues and set default value to false. also added tests for it as well as docs

[burhanuday]

@alexander-akait friendly ping

[alexander-akait]

@burhanuday yeah, sorry for delay, on my TODOs list on the top after #3739,

[hardfist]

web-infra-dev/rspack#2208 this is also the requested features from rspack users, glad to see webpack-cli is willing to support it

[alexander-akait]

@hardfist Yeah, it will be an official part of webpack ecosystem, I want to be align with next.js logic, it is flexible and solves almost all requests, hope we will finish it soon (this week)

[evenstensberg]

This is great! Could you fix the .gitignore glob and I'll do a manual review after?

[evenstensberg]

test/**/**/dist*

[evenstensberg]

@burhanuday I think also we need to check how the new node --env-file option could be used alongside this. Wil review your PR soon! :)

[Ivan198407]

Х̶о̶р̶о̶ш̶о̶ с̶ н̶е̶т̶е̶р̶п̶е̶н̶и̶е̶м̶ ж̶д̶у̶ ср, 22 нояб. 2023 г., 03:04 Even Stensberg ***@***.***>:

…

@burhanuday <https://github.com/burhanuday> I think also we need to check how the new node --env-file option could be used alongside this. Wil review your PR soon! :) — Reply to this email directly, view it on GitHub <#3759 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BBO6JJWAWFJIWT3AXTUV5QTYFUCOXAVCNFSM6AAAAAAXNRXH5KVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMRRGYYDCNBYGY> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[webpack-bot]

@ Thanks for your update.

I labeled the Pull Request so reviewers will review it again.

@snitin315 Please review the new changes.