$ yarn add --dev dynamic-cdn-webpack-plugin # load react from a cdn when built in production mode
$ yarn add --dev module-to-cdn # required by dynamic-cdn-webpack-plugin
$ yarn add --dev react-app-rewire-preact # install preact-compat
$ yarn add --dev react-app-rewire-styled-components # ability to use babel plugin of styled-components
$ yarn add --dev preload-webpack-plugin # ability to prefetch all code splitted routes/components.
Last active
December 14, 2017 16:20
-
-
Save gbozee/7f945861b5553f343198e45783ef0484 to your computer and use it in GitHub Desktop.
extends Default Create react app webpack config
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
const rewirePreact = require('react-app-rewire-preact'); | |
const rewireStyledComponents = require('react-app-rewire-styled-components'); | |
const PreloadWebpackPlugin = require('preload-webpack-plugin'); | |
const { ReactLoadablePlugin } = require('react-loadable/webpack'); | |
const DynamicCDNWebpackPlugin = require('dynamic-cdn-webpack-plugin') | |
var _require = require('react-app-rewired'), | |
injectBabelPlugin = _require.injectBabelPlugin; | |
function rewirePreload(config, env) { | |
config.plugins = [ | |
...config.plugins, | |
new DynamicCDNWebpackPlugin(), // dynamic-cdn-webpack plugin | |
new PreloadWebpackPlugin({ // webpack-preload-plugin which provides the ability to prefetch all code splitted routes. | |
rel: 'prefetch' | |
}), | |
] | |
return config; | |
} | |
// This is going to be used when server rendering react with react-loadable | |
function rewireLoadable(config,env){ | |
config.plugins = [ | |
...config.plugins, | |
new ReactLoadablePlugin({ | |
filename: './src/react-loadable.json', | |
}), | |
] | |
return injectBabelPlugin(["react-loadable/babel"], config); | |
} | |
//We are only enabling all this webpack config change in production | |
module.exports = function override(config, env) { | |
//do stuff with the webpack config... | |
// use the Preact rewire | |
if (env === "production") { | |
console.log("⚡ Production build with Preact"); | |
config = rewirePreact(config, env); // aliasing react with preact | |
config = rewireStyledComponents(config, env, { // configuring ssr option for styled-components | |
ssr: true, | |
}) | |
config = rewirePreload(config, env) | |
config = rewireLoadable(config, env) | |
} | |
return config; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment