Webpack Tutorial for Beginners #4 - Babel Loaders

[@fahrettinylmaz5777]

For those who are facing problems in 2021, May can follow these lines below:
npm install babel-loader @babel/core @babel/preset-env --save
and then webpack.config.js file should be like this:
module.exports = {
entry: "./src/script1.js",
output: {
path: __dirname + "/dist",
filename: "bundle.js",
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
},
},
},
],
},
mode: "none",
}
And so you will get bundle.js file in /dist folder.

[@marcinruszczyk693]

Thank you very much . I can add to this. Watch out file name script-1.js instead of script1.js and remember you run webpack with command: npx webpack.

[@Rugit0]

For the latest version of webpack change 'loaders:' to 'rules:'

[@samuelpimenta1942]

and 'babel-core' to 'babel-loader'

[@EnduranceT]

Yeah ninja, the babe loader is fine as well!

[@NappingNappers]

I came here for Babe Loader, I got duped and got Babel Loader instead.
Give me back my Babe Loader!!!

[@subharupchakraborty522]

Honestly was searching for you xD...

[@karandeepsingh6977]

I will prefer "babe-loader" xD.

[@hubertkocz637]

2018:
"From v2.1-beta.23 the loaders section is renamed to rules"

[@deveagle669]

Where is your "Ninja" sound?!? "WHHHHhaaaaa!!!!!!!!". Man, I love watching your videos just because of that sound. Made me laugh every time :-)

[@NetNinja]

Unfortunately it gave too many people a scare :(. But maybe I'll sneak it back in to some of my new video's!

[@jackylei6543]

Hi, great video! I wanted to ask why do you need the exclude option when you already have the entry option to the js-1 script? If the js-1 script isn't requiring anything from the node_modules folder, doesn't webpack then know to just completely ignore them?

[@curiousprogrammer90]

Love your easy explanations!

[@TheBest-sd2qf]

Hey great tutorials I really like them.

[@danialmalik80]

Hey, ShaunJP what does the babel-core actually do?

[@shadmanmartinpiyal4057]

For those who are facing problems in 2020,May, follow these,
npm install @babel-core -save
npm install @babel/preset-env -save
and webpack.config.js file should be like this,
module.exports = {
entry: './src/script1.js',
output:{
path: __dirname + "/dist",
filename:'bundle.js'
},
module:{
rules:[
{
test:/\.js$/,
exclude:/(node_modules)/,
loader:'babel-loader',
query:{
presets:['@babel/preset-env']
},
}
]
},
mode: 'none'
}
this will create a 'bundle.js' file in /dist folder,
If you install @babel-core and @babel/preset-env, you will get a nice line by line, bundle.js file, otherwise not.
Thanks.

[@yasithabandara7158]

inorder to avoid following error,
ERROR in ./index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/core'
instead of
npm install babel-core babel-loader babel-preset-es2015 --save-dev
use
npm install @babel/core --save-dev
npm install @babel/preset-env --save-dev
webpack.config.js shhould be like this
module.exports={
//define entry point
entry:'./index.js',
//define output
output:{
path:'F:\\webpack-playlist\\dist',
filename:'bundel.js'
},
module:{
rules:
[
{
test:/\.js$/,
exclude:/(node_modules)/,
loader:'babel-loader',
query:
{
presets:['@babel/preset-env']
}
}
]
}
};

[@shadmanmartinpiyal4057]

thanks. All worked fine in 2020 except that we have to add an additional property "mode:'none' "

[@EDUARDOMANX2]

Wait, what's the point of putting const type if its just going to translate it to a var type?

[@anilsnl]

Hi, thanks for your videos. I've got an question. I wanna use a html theme that contains lots of css and js libararies how should i organize this file from just one places when i added to thhse referance in index.html file, that doesen't work correctly can you help me go solve this problem. If you've got any referance can you provide? Thanks.

[@subharupchakraborty522]

Thats what this is all about..isnt it?What do you think webpack does...if not organize all the js files into one "bundle" file

[@SonnyDarvish]

ES2015, ES2016, ES2017 and ESNext are all vanilla JS. They're all plain JS, but different versions.

[@ioanvapi]

I tried the examples in this video without babel and bundle contains ES2015 code that is successfully executed by Chrome. Is that mean the browser is update to recognize es2015 and we don't have to use this loader for es2015 code?

[@mistrzyoda4335]

chrome is up to date with ES6 (except modules), while other browsers may not, e.g. IE 11

[@kryzys9sz]

Who knows why in my bundle.js file variables names have only one letter e.g var r, t, n?

[@muhammadyasser9201]

nothing is work, you need to update this course shaun

[@asdfasdfuhf]

Nowadays you call it rules instead of loaders