This was one of the best technical talks I have ever watched! Today I wanted to understand the bundle that webpack creates for a very simple project and I was having a bit of a hard time, so I looked for resources and came across this video. The bottom up approach of this talk has just been perfect to better understand how things fit together.
What an amazing video! I had to slow down and rewind in a lot of places because it was so filled with info. Also, love the self-deprecating humour and the unassuming tone. Brilliant 💟
Because it is not something "Learn JS in 10 hours" :D Joke aside the one who going to be interested in such a topic must pass the basic things so that way they are curious about those under-the-hood topics and start to search. That's why there are such low views because people who search for it are a minority.
Two thumbs up! I'll watch it again, but even a single view was really informative. It shows what problems other bundler creators and maintainers have to solve. Funny thing is I played with astexplorer yesterday and now, thank to you, I know how to use an AST for real live project.
First time I saw the loop counter, I was like, dude, why you doing that? At 20:12 I was like, dude, you genius. Alfred Hitchcock style twist. I’m sorry, I can’t explain what I’m understanding, but I get what you doing. Awesome stuff
My god... this video is gold. Sorry but I am downloading it for my future references. Please...please ...start a youtube channel dude. You explained everything really well each and every step with logging before moving forward which really helped me to understand what I am getting and what should I do with it to get where I want. Awesome talk.
Amazing!!! Really loved it. But I have a question. What if we have same file imported at two different places. How's web pack removes duplicates? Ex: Like lodash imported at multiple locations ?
In his example the asset was added multiple times to graph with different ids. Production bundlers check before creating an asset about its existence and map the existing asset id.
Webpack removes duplicates by making a seperate array for dependencies which are already processed and when a duplicate dependency comes to process it checks in the array that it has already processed so webpack leaves it and go to another dependency.
I wonder what is the `module` (2nd argument) for in `function(require, module, exports)`? User code (the module) would just populate `exports` and use no `module` argument?
why do you need "module" variable on lines 83, 85 and 87? Non of the modules actually use "module" parameter, only "require" and "exports". I might have to try rewriting it myself, maybe I missed something.
I had a very serious problem with babel during following this tutorial, from 26:34 The current @babel/core 's function transformFromAst somehow does not work with the presets 'env' options, so I had to read the babel's docs, which was absolutely useless in that it provided no explanation. Is there anyone who resolved this problem?
Babel's interface has changed a bit since this demo. You can use this instead: transformFromAstSync(ast, undefined, { 'presets': ['@babel/preset-env'] }); . Note: you also need to install @babel/preset-env as a dev dependency.
The default behavior of babel-preset-env is to transpile everything down to es5. If you pass it a description of what you will be running on, for example, `presets: [["env", { targets: { chrome: 66, safari: '11.1' } }]]` it will only transform code that won't run on those. It has a whole lot more features than I can get into here though!
@@henguemelkis1464 Not really an issue for const specifically, it's supported by everything current, including IE 11, but check what your users are using.
![React Tutorial For Beginners [ReactJS] | ReactJS Course | ReactJS For Beginners | Intellipaat](http://i.ytimg.com/vi/9vZ8ELqerPo/mqdefault.jpg)
This was one of the best technical talks I have ever watched! Today I wanted to understand the bundle that webpack creates for a very simple project and I was having a bit of a hard time, so I looked for resources and came across this video. The bottom up approach of this talk has just been perfect to better understand how things fit together.
What an amazing video! I had to slow down and rewind in a lot of places because it was so filled with info. Also, love the self-deprecating humour and the unassuming tone. Brilliant 💟
It is so sad that these kinds of videos are so underrated on youtube... This was so easy for me to understand
Because it is not something "Learn JS in 10 hours" :D Joke aside the one who going to be interested in such a topic must pass the basic things so that way they are curious about those under-the-hood topics and start to search. That's why there are such low views because people who search for it are a minority.
indeed one of the best tech talks I've ever watched. thanks for the extremely simplified and insightful explanation!
This is the best tech talk I have ever watched! Great talk! You have shown me how magic is done! Thank you so much!
Two thumbs up! I'll watch it again, but even a single view was really informative. It shows what problems other bundler creators and maintainers have to solve. Funny thing is I played with astexplorer yesterday and now, thank to you, I know how to use an AST for real live project.
Thanks! Helps a lot for my coming interview! Hope I can knock down everyone who asked me about Webpack bundle!
First time I saw the loop counter, I was like, dude, why you doing that? At 20:12 I was like, dude, you genius. Alfred Hitchcock style twist. I’m sorry, I can’t explain what I’m understanding, but I get what you doing. Awesome stuff
this is the best best bundler video..awesome
Thank you so much for bringing this concept to us.
it's quite funny when there is a lot of devs in the audience live debugging some live coding
This was great, thank you Ronen.
No doubt amazing explanation yet I don't have enough understanding to understand everything %100 percent. Thx for this video anyway
My god... this video is gold. Sorry but I am downloading it for my future references. Please...please ...start a youtube channel dude. You explained everything really well each and every step with logging before moving forward which really helped me to understand what I am getting and what should I do with it to get where I want. Awesome talk.
Great presentation, thanks!
This talk is awesome!
u r rock men! gr8 lecture bro
This video by default runs in 1.25x
😂
yes, and I am wachting ist at 2 X Speed, life is to short (and he's talking too slow;-)
amazing lecture!
amazing lecture !!
thats a damn good tech talk
Very nice talk. Well done!
Great video, many thanks :)
Amazing!!! Really loved it. But I have a question.
What if we have same file imported at two different places. How's web pack removes duplicates?
Ex: Like lodash imported at multiple locations ?
In his example the asset was added multiple times to graph with different ids. Production bundlers check before creating an asset about its existence and map the existing asset id.
Webpack removes duplicates by making a seperate array for dependencies which are already processed and when a duplicate dependency comes to process it checks in the array that it has already processed so webpack leaves it and go to another dependency.
Great explanation!
This was great!!
Great talk.
I wonder what is the `module` (2nd argument) for in `function(require, module, exports)`? User code (the module) would just populate `exports` and use no `module` argument?
why do you need "module" variable on lines 83, 85 and 87? Non of the modules actually use "module" parameter, only "require" and "exports". I might have to try rewriting it myself, maybe I missed something.
awesome!!!
Very Good Explanation
Great lecture
I had a very serious problem with babel during following this tutorial, from 26:34
The current @babel/core 's function transformFromAst somehow does not work with the presets 'env' options,
so I had to read the babel's docs, which was absolutely useless in that it provided no explanation.
Is there anyone who resolved this problem?
Babel's interface has changed a bit since this demo. You can use this instead: transformFromAstSync(ast, undefined, { 'presets': ['@babel/preset-env'] }); . Note: you also need to install @babel/preset-env as a dev dependency.
as of 2023/09/11 with "@babel/core": "^7.23.3",
npm install @babel/core
npm install @babel/preset-env
const babel = require('@babel/core');
...
const {code} = babel.transformFromAst(
ast,
null,
{presets:['@babel/env']}
);
cool thing, it is like poetry
Very clever!
georgeous!
magic explained with words
why does the subtitle is not English? is Dutch?
awesome!
awesome hello!
感觉国外的技术分享的氛围要好一些，你们一般是在哪些地方有这种技术分享活动呢？
clap on you! Thanks!
thanks a lot
Awesome!
So Great!!!!
awesome
Why is its name value Kiev?
Subtitles would be nice
amasing!
awsome
why export const is transpiled to 'var name' and not 'const name'? isnt const supported by all modern browsers?
Cause the purpose of transpiling is to support older browsers
The default behavior of babel-preset-env is to transpile everything down to es5. If you pass it a description of what you will be running on, for example, `presets: [["env", { targets: { chrome: 66, safari: '11.1' } }]]` it will only transform code that won't run on those. It has a whole lot more features than I can get into here though!
Because const is an ES6 feature, thus "new" feature, that is not supported by all browsers yet
@@henguemelkis1464 Not really an issue for const specifically, it's supported by everything current, including IE 11, but check what your users are using.
When subtitles fail
haha it's germany language
Under the hood
I know Kung Fu
I want the source code
github.com/ronami/minipack
这他娘听得懂有鬼了
awsome