Webpack / Babel

Question 1

What is Webpack?

Answer 1

A package that bundles js files together from across your project.

Question 2

How do you add a devDependency to a package?

Answer 2

Use npm install <package-name> —save-dev</package-name>

Question 3

What is an NPM script?

Answer 3

Terminal commands that automate repetitive tasks

Question 4

How do you execute Webpack with npm run?

Answer 4

Assuming you’ve got the npm script for building Webpack —> npm run build

Can be built in either product or development mode

Question 5

After making changes to code in src folder you need to…

Answer 5

Rerun build command and have Webpack rebuild main.js with the new code (unless you’re watching those files for changes)

Question 6

What is Babel?

Answer 6

A tool chain that converts code into other code. Useful for ES6 —> ES5, JSX / React, and TypeScript stripping

Question 7

What is a Plug-in?

Answer 7

A software component that adds a feature to an existing program. (Think themes / skins)

Also a function that babel is built on.

Question 8

What is a Webpack loader?

Answer 8

Tranformations applied to the source code of a module that allow you to pre-process files. They’re a good way to handle front-end build steps.

Question 9

How can you make Babel and Webpack work together?

Answer 9

Add webpack.config.js file with a rule for transforming .js files. Add the plugins you’d like for executing those transforms, and then build the project normally with webpack.