Last active
August 19, 2020 14:41
-
-
Save phdesign/3fd306db2bc53f6368e6f0f73bbeff19 to your computer and use it in GitHub Desktop.
Create react app no chunking, single file embedded CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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) | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"scripts": { | |
... | |
"build": "npx ./scripts/build.js", | |
... | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment