<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> I have searched the <a href="https://github.com/ant-design/ant-design/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://3x.ant.design/docs/react/use-with-create-react-app" rel="nofollow">https://3x.ant.design/docs/react/use-with-create-react-app</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">my: override-config.js</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const rewired = require('react-app-rewired')
const rewireLess = require('react-app-rewire-less')
const rewireEslint = require('react-app-rewire-eslint')
const path = require('path')
const {override, fixBabelImports, addLessLoader} = require('customize-cra');

function rewire(config, env) {
    const cssLoader = rewired.getLoader(
        config.module.rules,
        rule =&gt; rule.test &amp;&amp; String(rule.test) === String(/\.css$/)
    )
    const sassLoader = {
        test: /\.scss$/,
        use: [...(cssLoader.loader || cssLoader.use), 'sass-loader']
    }
    const oneOf = config.module.rules.find(rule =&gt; rule.oneOf).oneOf
    oneOf.unshift(sassLoader)

    config = rewired.injectBabelPlugin('transform-decorators-legacy', config)
    config.resolve.modules.push(path.resolve('./src'))

    return config
}

// module.exports = rewire
module.exports = override(
    rewire,
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
    }),
    addLessLoader({
        javascriptEnabled: true,
        modifyVars: {'@primary-color': '#a51d78'},
    }),
);
"><pre class="notranslate"><code class="notranslate">const rewired = require('react-app-rewired')
const rewireLess = require('react-app-rewire-less')
const rewireEslint = require('react-app-rewire-eslint')
const path = require('path')
const {override, fixBabelImports, addLessLoader} = require('customize-cra');

function rewire(config, env) {
    const cssLoader = rewired.getLoader(
        config.module.rules,
        rule =&gt; rule.test &amp;&amp; String(rule.test) === String(/\.css$/)
    )
    const sassLoader = {
        test: /\.scss$/,
        use: [...(cssLoader.loader || cssLoader.use), 'sass-loader']
    }
    const oneOf = config.module.rules.find(rule =&gt; rule.oneOf).oneOf
    oneOf.unshift(sassLoader)

    config = rewired.injectBabelPlugin('transform-decorators-legacy', config)
    config.resolve.modules.push(path.resolve('./src'))

    return config
}

// module.exports = rewire
module.exports = override(
    rewire,
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
    }),
    addLessLoader({
        javascriptEnabled: true,
        modifyVars: {'@primary-color': '#a51d78'},
    }),
);

</code></pre></div>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">start of project by command: yarn start</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">yarn run v1.22.17<br>
$ react-app-rewired start<br>
Failed to compile.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module.rules[1].oneOf[4] has an unknown property 'sideEffects'. These properties are valid:
   object { enforce?, exclude?, include?, issuer?, loader?, loaders?, oneOf?, options?, parser?, query?, resource?, resourceQuery?, compiler?, rules?, test?, use? }

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command."><pre class="notranslate"><code class="notranslate">Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module.rules[1].oneOf[4] has an unknown property 'sideEffects'. These properties are valid:
   object { enforce?, exclude?, include?, issuer?, loader?, loaders?, oneOf?, options?, parser?, query?, resource?, resourceQuery?, compiler?, rules?, test?, use? }

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
</code></pre></div>
<table role="table">
<thead>
<tr>
<th>Environment</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td>antd</td>
<td>3.26.20</td>
</tr>
<tr>
<td>React</td>
<td>5.0.7</td>
</tr>
<tr>
<td>System</td>
<td>osx</td>
</tr>
<tr>
<td>Browser</td>
<td>chrome</td>
</tr>
</tbody>
</table>
<h1 dir="auto">[feature request] small JS chunk files when using watch mode for non-CommonChunk plugged files</h1>
<p dir="auto">Webpack version:<br>
1.13.x/2.x</p>
<p dir="auto">environment:<br>
OSX 10.11.5</p>
<p dir="auto">Browser:all</p>
<p dir="auto">Language: JS</p>
<p dir="auto">Current behavior:<br>
Creates large bundled initial and anonymous chunk js files in watch mode.</p>
<p dir="auto">Expected/desired behavior:<br>
Create small chunk js files, or generate one module per chunk file in watch mode to allow dev-tools to not blank screen or crash. CommonChunks can be excluded.</p>
<p dir="auto">Motivation:<br>
I moved the system I am working on from using RequireJS CommonJS (CJS), 1000+ files with <code class="notranslate">define(function(require) { … })</code>, implementation to Webpack for production bundling.</p>
<p dir="auto">I am also using Chrome DevTools Workspace to edit my files while debugging.<br>
RequireJS CJS worked great with Workspaces because the modules would localhost load one file at time. Editing a file while on a breakpoint in the browser was easy in this fashion.</p>
<p dir="auto">Since I transitioned production to use Webpack, I’ve wanted to move the development workflow towards Webpack watch mode so we could start using Babel, pre-compiled templates, and other code transformers. But Chrome will, understandably, blank screen or crash if a large file changes, which get created as large files because it makes chunks include all  dependencies that are <code class="notranslate">require</code>d files that export through<code class="notranslate">define(function(require) { … })</code> . This makes Webpack watcher a difficult workflow selling point.</p>
<p dir="auto">I figure that the best approach to address this issue would be to do what dev RequireJS did, http request each individual module. This could also be done by creating smaller chunk files, or one module per chunk file.</p>
<p dir="auto">At first, I was hoping AggressiveSplitPlugin would do the job, but that wasn’t fast enough in watch mode. Also, I read <a href="https://github.com/webpack/webpack/issues/1223#issuecomment-232311846" data-hovercard-type="issue" data-hovercard-url="/webpack/webpack/issues/1223/hovercard">This is production only, don't use it in development</a></p>
<p dir="auto">I’ve looked into implementing this via plugin or loader, but I ended up learning that </p><div class="Box Box--condensed my-2">
  <div class="Box-header f6">
    <p class="mb-0 text-bold">
      <a href="https://github.com/webpack/webpack/blob/daf2f31233a9f2dc36f79162577a66e8b4eba622/lib/WebpackOptionsApply.js#L243-L247">webpack/lib/WebpackOptionsApply.js</a>
    </p>
    <p class="mb-0 color-fg-muted">
        Lines 243 to 247
      in
      <a data-pjax="true" class="commit-tease-sha" href="/webpack/webpack/commit/daf2f31233a9f2dc36f79162577a66e8b4eba622">daf2f31</a>
    </p>
  </div>
  <div itemprop="text" class="Box-body p-0 blob-wrapper blob-wrapper-embedded data">
    <table class="highlight tab-size mb-0 js-file-line-container" data-tab-size="8" data-paste-markdown-skip="">

        <tbody><tr class="border-0">
          <td id="L243" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="243"></td>
          <td id="LC243" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line"> <span class="pl-k">new</span> <span class="pl-v">RequireIncludePlugin</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">,</span> </td>
        </tr>

        <tr class="border-0">
          <td id="L244" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="244"></td>
          <td id="LC244" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line"> <span class="pl-k">new</span> <span class="pl-v">RequireEnsurePlugin</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">,</span> </td>
        </tr>

        <tr class="border-0">
          <td id="L245" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="245"></td>
          <td id="LC245" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line"> <span class="pl-k">new</span> <span class="pl-v">RequireContextPlugin</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">modules</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">extensions</span><span class="pl-kos">)</span><span class="pl-kos">,</span> </td>
        </tr>

        <tr class="border-0">
          <td id="L246" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="246"></td>
          <td id="LC246" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line"> <span class="pl-k">new</span> <span class="pl-v">AMDPlugin</span><span class="pl-kos">(</span><span class="pl-s1">options</span><span class="pl-kos">.</span><span class="pl-c1">module</span><span class="pl-kos">,</span> <span class="pl-s1">options</span><span class="pl-kos">.</span><span class="pl-c1">amd</span> <span class="pl-c1">||</span> <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">,</span> </td>
        </tr>

        <tr class="border-0">
          <td id="L247" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="247"></td>
          <td id="LC247" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line"> <span class="pl-k">new</span> <span class="pl-v">CommonJsPlugin</span><span class="pl-kos">(</span><span class="pl-s1">options</span><span class="pl-kos">.</span><span class="pl-c1">module</span><span class="pl-kos">)</span><span class="pl-kos">,</span> </td>
        </tr>
    </tbody></table>
  </div>
</div>
<br>
made it difficult do it in either cases since those plugins seem to get in the way of accomplishing my goal by reading and transforming the <code class="notranslate">define(function(require){})</code> string before other plugins can start doing work. But I am probably mistaken since Webpack is a very intimidating source to read, which makes it difficult for me to follow and debug my attempts. Maybe even allow for a way to prevent passing those plugins by passing an option param so other plugins can get a chance to implement bundling optimizations, etc.<p></p>
<p dir="auto"><g-emoji class="g-emoji" alias="bow" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f647.png">🙇</g-emoji> Thanks for reading and making bundling easy. <g-emoji class="g-emoji" alias="bow" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f647.png">🙇</g-emoji></p>