babel-intro

Question 1

What is Babel?

Answer 1

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

Question 2

What is a Plug-in?

Answer 2

A Plug-in is 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

They 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.

Question 4

How can you make Babel and Webpack work together?

Answer 4

Using the “configuration” way to use loaders, in a webpack.config.js file, use the “babel-loader” and include babel plugins inside module.rules.

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
}
};