WebPack/Babel

Question 1

What is Webpack?

Answer 1

is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph from one or more entry points and then combines every module your project needs into one or more bundles, which are static assets to serve your content from.

bundles multiple modules into one.

Question 2

How do you add a devDependency to a package?

Answer 2

npm install –save-dev
npm install “package-name”–save-dev

npm i -D webpack webpack-cli

Question 3

What is an NPM script?

Answer 3

convenient way to bundle common shell commands for your project. supports a number of built-in scripts.

property in package.json, key is anything we name it and value is command-line command.

Question 4

How do you execute Webpack with npm run?

Answer 4

npm run build IF script tag name is build. “build” can be anything you named it in the script name(property) of the package.json.

Question 5

What is Babel?

Answer 5

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ (ES6) code into a backwards compatible version of JavaScript in current and older browsers or environments.

toolchain (compiler) to convert to backwards compatible version of JS. in class from JSX syntax to JS.

Question 6

What is a Plug-in?

Answer 6

a software component that adds a specific feature to an existing computer program. When a program supports plug-ins, it enables customization. will add more customization to a functionality to an application. customize or enhance a feature.

if a program works without it, it is a plug-in

Question 7

What is a Webpack loader?

Answer 7

transformations that are applied to the source code of a module. They allow you to pre-process files as you import or “load” them. Loaders can transform files from a different language (like TypeScript) to JavaScript or load inline images as data URLs. Loaders even allow you to do things like import CSS files directly from your JavaScript modules!

in webpack.config (in babel-intro) when a file ends .js, use babel-loader, and follow following plugins (transformation). need babel plugins in order to actually transform back to JS.

Question 8

How can you make Babel and Webpack work together?

Answer 8

INSTALL BELOW
webpack
webpack-cli
@babel/core
@babel/plugin-transform-block-scoping
@babel/plugin-transform-arrow-functions
AND ADD “build”: “webpack” SCRIPT WITH NPM
AND INSTALL
npm install -D babel-loader @babel/core @babel/preset-env webpack
babel-core, webpack hook these together with babel loader.