<p dir="auto">Hi!</p>
<p dir="auto">My entry module uses a dynamic require, which forces Webpack to try to build every file under the context directory into one gigantic bundle. Is there a way to restrict which files webpack tries to bundle in this case? For example, ignoring any files underneath various test directories? Is there also a way to force webpack to split these files out into several bundles?</p>
<p dir="auto">I think, because the dynamic require is so ambiguous, Webpack determines that every file within the context directory should be bundled with the entry file so that they're all available should the dynamic require need them. That makes plenty of sense, but at some point I'd like <code class="notranslate">require</code> to send off an ajax request for the next bundle. How can I force that?</p>
<p dir="auto">Thanks!</p>
<p dir="auto"><strong>What is the current behavior?</strong><br>
When using public/private field declarations in an es6 class. Webpack fails to bundle with the below error</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="ERROR in ./index.js 2:9
Module parse failed: Unexpected token (2:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| class Rectangle {
&gt;   height = 0;
|   width;
| 


ERROR in ./index.js 10:2
Module parse failed: Unexpected character '#' (10:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
| class RectangleP {
&gt;   #height = 0;
|   #width;
|   constructor(height, width) {"><pre class="notranslate"><code class="notranslate">ERROR in ./index.js 2:9
Module parse failed: Unexpected token (2:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| class Rectangle {
&gt;   height = 0;
|   width;
| 


ERROR in ./index.js 10:2
Module parse failed: Unexpected character '#' (10:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
| class RectangleP {
&gt;   #height = 0;
|   #width;
|   constructor(height, width) {
</code></pre></div>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>
<p dir="auto"><strong>index.js</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="class Rectangle {
  height = 0;
  width;

  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

class RectangleP {
  #height = 0;
  #width;
  constructor(height, width) {
    this.#height = height;
    this.#width = width;
  }
}"><pre class="notranslate"><span class="pl-k">class</span> <span class="pl-v">Rectangle</span> <span class="pl-kos">{</span>
  <span class="pl-c1">height</span> <span class="pl-c1">=</span> <span class="pl-c1">0</span><span class="pl-kos">;</span>
  <span class="pl-c1">width</span><span class="pl-kos">;</span>

  <span class="pl-en">constructor</span><span class="pl-kos">(</span><span class="pl-s1">height</span><span class="pl-kos">,</span> <span class="pl-s1">width</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">height</span> <span class="pl-c1">=</span> <span class="pl-s1">height</span><span class="pl-kos">;</span>
    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">width</span> <span class="pl-c1">=</span> <span class="pl-s1">width</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span>

<span class="pl-k">class</span> <span class="pl-v">RectangleP</span> <span class="pl-kos">{</span>
  #<span class="pl-c1">height</span> <span class="pl-c1">=</span> <span class="pl-c1">0</span><span class="pl-kos">;</span>
  #<span class="pl-c1">width</span><span class="pl-kos">;</span>
  <span class="pl-en">constructor</span><span class="pl-kos">(</span><span class="pl-s1">height</span><span class="pl-kos">,</span> <span class="pl-s1">width</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-smi">this</span><span class="pl-kos">.</span>#<span class="pl-c1">height</span> <span class="pl-c1">=</span> <span class="pl-s1">height</span><span class="pl-kos">;</span>
    <span class="pl-smi">this</span><span class="pl-kos">.</span>#<span class="pl-c1">width</span> <span class="pl-c1">=</span> <span class="pl-s1">width</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto"><strong>webpack.config.js</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const { resolve } = require('path');

module.exports = {
    entry: './index.js',
    output: {
      path: resolve(__dirname, 'dist'),
      filename: '[name].js'
    },
    resolve: {
        extensions: [ '.js' ]
    }
}"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-kos">{</span> resolve <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'path'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
    <span class="pl-c1">entry</span>: <span class="pl-s">'./index.js'</span><span class="pl-kos">,</span>
    <span class="pl-c1">output</span>: <span class="pl-kos">{</span>
      <span class="pl-c1">path</span>: <span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s1">__dirname</span><span class="pl-kos">,</span> <span class="pl-s">'dist'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
      <span class="pl-c1">filename</span>: <span class="pl-s">'[name].js'</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-c1">resolve</span>: <span class="pl-kos">{</span>
        <span class="pl-c1">extensions</span>: <span class="pl-kos">[</span> <span class="pl-s">'.js'</span> <span class="pl-kos">]</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>






<p dir="auto"><strong>What is the expected behavior?</strong><br>
Code gets bundled.</p>


<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:  4.41.5<br>
Node.js version: v12.12.0<br>
Operating System: macOS Catalina<br>
Additional tools:</p>