Issue 1:
I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

https://3x.ant.design/docs/react/use-with-create-react-app

Steps to reproduce

my: override-config.js

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 => rule.test && String(rule.test) === String(/\.css$/)
)
const sassLoader = {
test: /\.scss$/,
use: [...(cssLoader.loader || cssLoader.use), 'sass-loader']
}
const oneOf = config.module.rules.find(rule => 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'},
}),
);

What is expected?

start of project by command: yarn start

What is actually happening?

yarn run v1.22.17

$ react-app-rewired start

Failed to compile.

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.

Environment
Info

antd
3.26.20

React
5.0.7

System
osx

Browser
chrome

Issue 2:
[feature request] small JS chunk files when using watch mode for non-CommonChunk plugged files

Webpack version:

1.13.x/2.x

environment:

OSX 10.11.5

Browser:all

Language: JS

Current behavior:

Creates large bundled initial and anonymous chunk js files in watch mode.

Expected/desired behavior:

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.

Motivation:

I moved the system I am working on from using RequireJS CommonJS (CJS), 1000+ files with define(function(require) { … }), implementation to Webpack for production bundling.

I am also using Chrome DevTools Workspace to edit my files while debugging.

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.

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 required files that export throughdefine(function(require) { … }) . This makes Webpack watcher a difficult workflow selling point.

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.

At first, I was hoping AggressiveSplitPlugin would do the job, but that wasn’t fast enough in watch mode. Also, I read This is production only, don't use it in development

I’ve looked into implementing this via plugin or loader, but I ended up learning that

webpack/lib/WebpackOptionsApply.js

Lines 243 to 247
in
daf2f31

new RequireIncludePlugin(),

new RequireEnsurePlugin(),

new RequireContextPlugin(options.resolve.modules, options.resolve.extensions),

new AMDPlugin(options.module, options.amd || {}),

new CommonJsPlugin(options.module),

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 define(function(require){}) 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.

🙇 Thanks for reading and making bundling easy. 🙇