react-scripts
This package includes scripts and configuration used by Create React App.
Please refer to its documentation:
- Getting Started – How to create a new app.
- User Guide – How to develop apps bootstrapped with Create React App.
Changes in this variant
Use custom dust naming via configure in package.json
{
distNaming: {
output: {
production: {
filename: 'epg.bundle.js',
chunkFilename: '[name].[contenthash:8].chunk.js',
},
development: {
// same as above
},
},
css: {
filename: '[name].[contenthash:8].css',
chunkFilename: '[name].[contenthash:8].chunk.css',
},
media: {
filename: '[name].[hash:8].[ext]',
},
files: {
filename: '[name].[hash:8].[ext]',
},
},
}Use CACHE_ROOT from .env to instruct where webpack plugins/loaders store caches
If variable is not set will apply default values, for:
- webpack -
node_modules/.cache - terser - as same as webpack config due changes in 5.0.0
- babel loader - value
true - jest - value
true
Do not forget to add them in .*ignore files
External config for postcss
In case external config file postcss.config.js is present in project root it will replace default postcssOptions.
Plugins in default options:
[
'postcss-flexbugs-fixes',
[
'postcss-preset-env',
{
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
},
],
]With adds tailwindcss plugin when config file tailwind.config.js is present in project root or postcss-normalize when is not.
Use webpackOverrides from package.json
Unstable and dangerous.
Externals
Define externals library. Make sure that include correspond scripts into public/index.html
Example:
{
"webpackOverrides": {
"externals": {
"react": "React",
"react-dom": "ReactDOM",
"lottie-web": "lottie",
"@sentry/browser": "Sentry"
}
}
}optimization
May override any optimization configuration, must follow webpack rules.