Use Babel & Webpack To Compile ES2015 - ES2017

The github links are not accessible

Thanks Brad😊😊😊👍👍👍

Thanks for this brother 🔥

Thanks for the video, always webpack and babel was a black box to me, not anymore

You didn't explain why you put a `?` in the `/\.js?$/`?

2021 Possible Fix that worked for me:

>> npm uninstall webpack --save-dev
>> npm install [email protected] --save-dev //this is the current version at this time//

Then go into webpack.config.js and add in a mode option to the module.exports object:

module.exports = {
entry: {
app: './src/app.js'
},
output: {
path: path.resolve(__dirname, 'build'),
filename: 'app.bundle.js'
},
module: {
rules: [{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
}
}]
},
//THIS PART IS NEW//

mode: 'none',
}

If you're having issues :-

[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
- configuration.module.rules[0] has an unknown property 'query'. These properties are valid:
object { compiler?, dependency?, descriptionData?, enforce?, exclude?, generator?, include?, issuer?, issuerLayer?, layer?, loader?, mimetype?, oneOf?, options?, parser?, realResource?, resolve?, resource?, resourceFragment?, resourceQuery?, rules?, scheme?, sideEffects?, test?, type?, use? }
-> A rule description with conditions and effects for modules.
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Try the below steps:

npm uninstall webpack --save-dev
&
npm install [email protected] --save-dev

In our webpack.config.js module, "query" no longer exists. It should be:

options: {
presets: ['@babel/preset-env']
}

this is might be out of the topic but please allow me to ask you, what apps you used on your desktop clock. or how did you do that. i really love your desk top clock. please share it to me.....

Good

Thank you so much

I wish I know this a long time ago, this really helps to web performance.
Thank you, sir!

hey is there's any chance you can update this video?

Some changes in 2021:
1) in webpack.config.js, inside rules instead of query give options
2) in package.json, in "start", give webpack serve instead of webpack-dev-server
OTHER CHANGES ARE MENTIONED IN THE COMMENTS BELOW

this is great, thx a lot man!

fdsfddf

Thanx for the nice video. So u are saying that if I build a simple website using ES6 but no node.js then I can still use babel and webpack? Is that right? But I would still need to install node, right? is there an option to use these things without node?

The year now is 2020 and modules->rules no longer has query. It can be changed to options.
module: {
rules: [{
// loader will parse and compile all files with .js extension
test: /\.js?$/,
// we exclude entire node_module from compiling
exclude: /node_module/,
// set compiler
loader: 'babel-loader',
options: {
presets: [ '@babel/preset-env' ] }
}]
}