Deconstructing Create-React-App with Webpack 4 & Babel 7

In the last video, we talked about server-side vs. client-side rendering, and concluded that create-react-app is best suited for SPAs, or single-page apps. Though you can work around server rendering in CRA without ejecting https://medium.com/bucharestjs/upgrading-a-create-react-app-project-to-a-ssr-code-splitting-setup-9da57df2040a you still have to tackle the tradeoffs of an automagic zero-configuration setup. There comes a day when your curiosity takes over, and you decide to explore the mysterious inner workings of Facebook's toolkit. Perhaps you need to tweak the Webpack config, pull in a missing polyfill, or enable support for a bleeding-edge ESNext feature. The confines of CRA render themselves too restrictive, so you make a bold decision to eject... To only discover 100s LOC of config and scripts that can overwhelm at first sight. There is tremendous value in learning the front-end tooling, since you can take that knowledge with you when you move on from React to Angular or Vue. If you want to learn how to scaffold a boilerplate project from ground up using cutting-edge tools like Webpack 4 and Babel 7, then this video is for you. We will pick up right where we left off with SSR, and go away from create-react-app to a custom production-ready build setup in just under 30 min. We will use the power of built-in sensible defaults in Webpack 4, and the browser targeting capabilities in Babel 7. I will also touch on polyfilling and code splitting in the second half. The resulting project will be a more configurable, upgradable, and extensible workspace with a dev server, hot reload, and optimized build. I strongly recommend that you go over or re-visit these videos first: - React App with Webpack & Babel (ES6+, source maps, hot reload, and more) https://www.youtube.com/watch?v=dOU4FBNVnl8 - What is Server-Side Rendering (and Why Create React App doesn't support it) https://www.youtube.com/watch?v=8_RzRQXSHcg Exercises Database App on CodeSandbox https://codesandbox.io/s/qq4oz0ym69 Babel 7 is Out! https://babeljs.io/blog/2018/08/27/7.0.0 Configuring Babel https://babeljs.io/docs/en/configuration @babel/preset-env can target specific browsers http://2ality.com/2017/02/babel-preset-env.html "last 2 versions" considered harmful by Jamie K https://jamie.build/last-2-versions Get in touch with me on Minds https://www.minds.com/CodeRealm