<h1 dir="auto">Bug report</h1>
<p dir="auto">I have posted question regarding to it on stackowerflow here:<br>
<a href="https://stackoverflow.com/questions/70140202/webpack-defineplugin-process-env-node-env-is-undefined" rel="nofollow">https://stackoverflow.com/questions/70140202/webpack-defineplugin-process-env-node-env-is-undefined</a><br>
I am not too good with front-end technologies... So if I have wrong expectations - please correct me or my code. I have created a repository with code that allows to reproduce issue. Here is the link: <a href="https://github.com/ffatheranderson/webpack-issue-reproduction">https://github.com/ffatheranderson/webpack-issue-reproduction</a></p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">After I execute npm run watch command - the generated result/bundle.js file contains such lines:</p>
<p dir="auto">...<br>
var _environment = undefined;<br>
var _ANOTHER_VARIABLE = "another variable value";<br>
...</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">I expect that after I execute npm run watch command - the generated result/bundle.js file to have such lines:</p>
<p dir="auto">...<br>
var _environment = 'development';<br>
var _ANOTHER_VARIABLE = "another variable value";<br>
...</p>
<p dir="auto">I have such expectation because of these lines in in webpack.config.js file:</p>
<p dir="auto">plugins: [<br>
new webpack.DefinePlugin({<br>
ENVIRONMENT: JSON.stringify(process.env.NODE_ENV),<br>
ANOTHER_VARIABLE: JSON.stringify("another variable value"),<br>
})<br>
]<br>
...</p>


<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:  5.64.4<br>
Node.js version: 14.16.0<br>
Operating System: WIndows 10<br>
Additional tools:</p>
<p dir="auto">I'd like to use <code class="notranslate">require.ensure</code>, but I have special requirements for loading chunks and I can't use the built-in jsonp loader (for offline support and to work around browser bugs I need to load JS from <code class="notranslate">localStorage</code>).</p>
<p dir="auto">I "only" need to replace the few lines that create a new script and insert it to DOM, but replacing that bit seems like a rather a complex thing to implement (please correct me if there's a better way):</p>
<ul dir="auto">
<li>I've written a custom function for <code class="notranslate">options.target</code> that invokes all usual webpack plugins (same as <code class="notranslate">WebpackOptionsApply</code>) except the <code class="notranslate">JsonpTemplatePlugin</code>.</li>
<li>I've had to copy&amp;paste&amp;edit code of <code class="notranslate">JsonpTemplatePlugin</code> and <code class="notranslate">JsonpMainTemplatePlugin</code> plugin to modify the script loader part.</li>
</ul>
<p dir="auto">That already seems like a fragile hack — I'm duplicating webpack's built-in functionality and probably relying too much on implementation details.</p>
<p dir="auto">There's another thing that has bitten me hard: <code class="notranslate">options.target == "web"</code> is magically special due to <code class="notranslate">defaultByTarget</code> in <code class="notranslate">WebpackOptionsDefaulter</code> and affects several other configuration options. This change in defaults was unexpected and has broken my build in subtle ways that were hard to debug.</p>
<p dir="auto">Could you:</p>
<ul dir="auto">
<li>
<p dir="auto">add configuration option or a more direct plugin API for replacing the jsonp loader code?</p>
</li>
<li>
<p dir="auto">and/or make it easier to use custom <code class="notranslate">target</code> that extends behavior of <code class="notranslate">"web"</code>?</p>
<p dir="auto">For example you could make <code class="notranslate">target</code> an instance of a class that has properties/getters for the defaults, so then instead of:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="options.resolve.modulesDirectories = defaultByTarget(options.resolve.modulesDirectories,
    [&quot;web_modules&quot;, &quot;node_modules&quot;],
…"><pre class="notranslate"><span class="pl-s1">options</span><span class="pl-kos">.</span><span class="pl-c1">resolve</span><span class="pl-kos">.</span><span class="pl-c1">modulesDirectories</span> <span class="pl-c1">=</span> <span class="pl-s1">defaultByTarget</span><span class="pl-kos">(</span><span class="pl-s1">options</span><span class="pl-kos">.</span><span class="pl-c1">resolve</span><span class="pl-kos">.</span><span class="pl-c1">modulesDirectories</span><span class="pl-kos">,</span>
    <span class="pl-kos">[</span><span class="pl-s">"web_modules"</span><span class="pl-kos">,</span> <span class="pl-s">"node_modules"</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
<span class="pl-s1">…</span></pre></div>
<p dir="auto">it'd be something like:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="options.resolve.modulesDirectories = options.resolve.modulesDirectories || options.target.getDefaultModulesDirectories();"><pre class="notranslate"><span class="pl-s1">options</span><span class="pl-kos">.</span><span class="pl-c1">resolve</span><span class="pl-kos">.</span><span class="pl-c1">modulesDirectories</span> <span class="pl-c1">=</span> <span class="pl-s1">options</span><span class="pl-kos">.</span><span class="pl-c1">resolve</span><span class="pl-kos">.</span><span class="pl-c1">modulesDirectories</span> <span class="pl-c1">||</span> <span class="pl-s1">options</span><span class="pl-kos">.</span><span class="pl-c1">target</span><span class="pl-kos">.</span><span class="pl-en">getDefaultModulesDirectories</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
</li>
</ul>