Skip to content

Instantly share code, notes, and snippets.

@phdesign
Last active August 19, 2020 14:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save phdesign/3fd306db2bc53f6368e6f0f73bbeff19 to your computer and use it in GitHub Desktop.
Save phdesign/3fd306db2bc53f6368e6f0f73bbeff19 to your computer and use it in GitHub Desktop.
Create react app no chunking, single file embedded CSS
// npm install rewire
const rewire = require('rewire');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const defaults = rewire('react-scripts/scripts/build.js');
const config = defaults.__get__('config');
// Consolidate chunk files instead
config.optimization.splitChunks = {
cacheGroups: {
default: false,
},
};
// Move runtime into bundle instead of separate file
config.optimization.runtimeChunk = false;
// JS
config.output.filename = 'static/js/[name].js';
// CSS remove MiniCssPlugin
config.plugins = config.plugins.filter(plugin =>
!(plugin instanceof MiniCssExtractPlugin));
// CSS replaces all MiniCssExtractPlugin.loader with style-loader
config.module.rules[2].oneOf = config.module.rules[2].oneOf.map(rule => {
if (!rule.hasOwnProperty('use')) return rule;
return Object.assign({}, rule, {
use: rule.use.map(options => /mini-css-extract-plugin/.test(options.loader)
? {loader: require.resolve('style-loader'), options: {}}
: options)
});
});
{
"scripts": {
...
"build": "npx ./scripts/build.js",
...
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment