6. THE MAGIC IS HIDDEN FROM YOUR VIEW
âž What is going on?
âž There will be always customizing issues**
âž You canât use latest updates
âž Extra dependencies
âž Eject
11. DEPENDENCIES
âž webpack: We need Webpack to bundle our code.
âž webpack-cli: We will be using some CLI features of
Webpack to make our lives easier while writing some
scripts.
âž webpack-dev-server: we will create a server using the
webpack-dev-server package. This is only meant to be used
in the development environment, and not for production.
This means while developing and working on my code, I
donât need a separate server like NodeJS to setup manually.
12. DEPENDENCIES
âž webpack-merge: To divide our conïŹguration into chunks
âž style-loader: This adds CSS to the DOM by injecting a
script tag in the header
âž sass-loader: For SCSS support
âž webpack-visualizer-plugin: To see a visual representation
of each of our bundle sizeâââhow much space they are
taking and what are their dependencies.
13.
14. DEPENDENCIES
âž node-sass: A dependency for sass-loader
âž css-loader: To convert our .scss ïŹles into .css
âž mini-css-extract-plugin: This plugin extracts CSS into
separate ïŹles. It creates a CSS ïŹle per JS ïŹle which
contains CSS.
âž uglifyjs-webpack-plugin: To minify JavaScript code for
production
15. DEPENDENCIES
âž optimize-css-assets-webpack-plugin:Â To minify CSS code for
production
âž html-webpack-plugin: This does more then generate an HTML
ïŹle, it supports on demand .css and .js ïŹles automatically
added to your HTML ïŹles on demand
âž copy-webpack-plugin: Copies ïŹles/folders to your build folder.
➠babel-loader: This is the loader that helps webpack compile .js
ïŹles
16. DEPENDENCIES
âž @babel/core: Babel core compiler, this is a dependency that lets
you use babel-loader
➠@babel/preset-react Babel preset for React code
âž @babel/preset-env: Babel preset that allows you to use the
latest JavaScript
âž @babel/pollyïŹll: Babel includes a polyïŹll that includes a
custom regenerator runtime and core-js. This will emulate a full
ES2015+ environment. This means support for async/await type
of cool syntax sugar.
17. DEPENDENCIES
âž @babel/plugin-proposal-class-properties: Coverts your
class syntax into a function for browsers that donât support
class syntax
âž @babel/plugin-syntax-dynamic-import: This is what helps
with code splitting. Webpack ships with code splitting by
default (Since webpack 1). But when you want to code
split in webpack while you are using babel, then you need
to use this plugin.
24. ADVANTAGES OF TEST
âž Facilitates discovering bugs in the development phase,
before it reaches users
âž Enforces writing better code that is more modular, covers
edge cases, and easily testable
âž Lowers the risk when making large changes or refactors
âž Provides documentation and helps the next engineer
understand what the code should do