Please enable JavaScript.
Coggle requires JavaScript to display documents.
Webpack & Babel - Coggle Diagram
Webpack & Babel
Webpack
what is it
module bundler
bundling
all JS file into one JS
all CSS file into one CSS
etc
when to use
frontend
why
reduce the loading time of frontend
get rid of unused codes
uglify
what it does
uglify
mix all modules into one
reducing size
usage
install webpack
run npx webpack
configuration
!needs further research
Babel
what is it
JavaScript compiler
compiling ES6 to ES5, etc
when to use
frontend
to use ES6
used by webpack
backend
to use ES6
preset & plugin
preset
a group of
plugins
plugin
a singular plugin
usage
install babel
install preset/plugin
most common
babel-preset-env
run npx <src> --out-dir <dist>