▸ 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
▸ 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.
▸ 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.
▸ 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
▸ optimize-css-assets-webpack-plugin: To minify CSS code for
▸ 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
▸ @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
▸ @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.
▸ @babel/plugin-proposal-class-properties: Coverts your
class syntax into a function for browsers that don’t support
▸ @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.
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