Babel

Question 1

What is Babel?

Answer 1

Babel is a JavaScript compiler
Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. Here are the main things Babel can do for you:

• Transform syntax
• Polyfill features that are missing in your target
  environment (through a third-party polyfill such as core-
  js)
• Source code transformations (codemods)

Question 2

What is a Plug-in?

Answer 2

a software component that adds a specific feature to an existing computer program. When a program supports plug-ins, it enables customization.

Question 3

What is a Webpack loader?

Answer 3

Loaders are transformations that are applied to the source code of a module. They allow you to pre-process files as you import or “load” them. Thus, loaders are kind of like “tasks” in other build tools and provide a powerful way to handle front-end build steps. 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!

Question 4

How can you make Babel and Webpack work together?

Answer 4

Use babel-loaders.

Ex:

module.exports = {
mode: ‘none’,
module: {
rules: [
{
test: /.js$/,
use: {
loader: ‘babel-loader’,
options: {
plugins: [
‘@babel/plugin-transform-block-scoping’,
‘@babel/plugin-transform-arrow-functions’
]
}
}
}
]
},
performance: {
hints: false
}
};