Wow. probably the best technical video I've ever seen! Gets straight to the point, no fluff, assumes a certain level of skill. You should do all the tech videos on the net!.
This is a really great intro. Been trying to understand a existing react codebase at my new job and i realised I couldn't go further without understanding webpack. Got a basic understanding of what loaders are doing. Need to learn more about code splitting and chunks now. Thanks for this video. It really helped. Keep up the good work.
To anyone having problem with the css-loader part, please consider that you are not allowed to omit the "-loader" sufic for loaders anymore, wich requires you to use "require('css-loader!./bear.css')".
noherczeg Yep! It should as I believe WebStorm just uses Chrome dev tools via an extension. You just need to ensure you've got your source maps in order. webpack has many options for handling source maps: webpack.github.io/docs/configuration.html#devtool
I have a question at 5:16.. Why isn't the output for the bundle.js is needed? I didn't understand that and the how does the index.html being rendered? Sorry I am new here
Great question! webpack-dev-server will compile the bundle.js on demand or in other words, each time you request that file from the server it will compile and serve it to your browser. Which can be a little faster as it doesn't have to write it to the file system, have the server read it and then serve it from the file system. It's only for development though. So when you're ready to publish your site to production, you would compile to a file instead and then serve that. Hopefully that answers your question.
Im sorta new to a few of these things, but I have a question : At about 5:01 you start showing how webpack-dev-server automatically re-bundles things. What would be the [difference, upside, downside] to doing this with gulp (assuming this can be done with gulp)? great vid though. Nice pace, nice clarity.
+dfdhherhehhzdhdhtrhdhdhdshehhfdh Yep! webpack has an API in which you can integrate into gulp: webpack.github.io/docs/usage-with-gulp.html or if you want a streaming interface to webpack: github.com/shama/webpack-stream With webpack, you don't always need a separate build tool though. If you're just using gulp to bundle/minify/compress code, webpack can do those things. Otherwise if you're doing other types of operations that webpack isn't geared for, a separate more generic build tool like gulp is useful. The advantage webpack has is it uses a dependency graph and can do incremental builds. Where a generic build tool doesn't and has to rebuild all the files each time.
Thanks for your tutorial. Just a couple of questions: 1. When you run npm init, how can you get the dependencies defined in package.json right away? 2. In package.json, do we still need to specify ./index.js for webpack-dev-server since we already defined the entry point in webpack.config.js ?
Great tut ! Not sure I like some of the webpack ideas from a build perspective do I really want my css made into a js module ? I still really like gulp but am here because of browserify not handling react require well.
First off: I really like your style of explaining. You fill up knowledge-gaps and answer a lot of my spontaneously occuring questions while watching your videos. For this video I still have a question though. That Webpack-dev-server function seems to be pretty neat, but is there a way to give it a HTML file it loads the bundle in? Or do I have to create all the HTML-tags dynamically via JS at the beginning?
+Nepomuk Leutschacher Thanks! :D With webpack-dev-server, the index.html file is optional. If you don't supply one in the --content-base folder, it will create one for you. Otherwise if you have created an index.html file, it will use that one instead. Does that answer your question or did I misunderstand the question?
Thank you Kyle. One quick question. I am trying to run a webpack project on port 80. I am using "npm run server:prod". Using webpack config file, I changed port number to 80 - i.e. something like below const PORT = process.env.PORT || 80; However, whenever I run the project using npm run server:prod, it's always running on port 8080 or 8081. Any thoughts on what I am doing wrong here, how can I run prod on port 80
Thanks a lot.. at another comment you have written: "Just do import from 'bootstrap/fileName.css' No need to put './bootstrap/fileName.css" so why when require jquery we just do require('jquery') no ('jquery/dist/jquery.js')?
If you leave off the `./` in the require statement it will attempt to resolve the 3rd party module. In other words, it will look for a package in the `node_modules` folder (or wherever else you've configured webpack to look). Within the `node_modules/jquery` folder is a package.json that defines a `main` key. webpack will check for that when resolving the module (among other ways, such as a file named the same as the package or named index.js within the package, to try and find the appropriate file to load). Check out this page: webpack.github.io/docs/resolving.html
You can use AMD syntax (which requirejs uses) with webpack. I'd say use whatever you prefer. I personally prefer commonjs syntax (Node.js style). A lot of people are starting to use the ES6 module syntax now too (I did a video on it ua-cam.com/video/_3oSWwapPKQ/v-deo.html). webpack can read that syntax too.
Hey Kyle, thx you're a great explainer :), what's the best 'directory' solution with webpack, so to avoid having to require relative paths such as require('../../../../../../components/annoying') ? I'm currently working on a project using vue/laravel/elixir(gulp/browserify) thinking maybe webpack is a better solution, have you got a chance to work with webpack/vue? thnx for your time !!
+whereitsfrom Thanks! I haven't used Vue too much yet. But I have ran into long paths with relative requires. The ideal solution is to structure your app to avoid having to do it. The primary reason to avoid that pattern is if someone makes a change to the require()'d upper level file, it will have cascading consequences across the app. The alternative is to structure the app into smaller standalone modules that get glued together. Although sometimes that ideal structure isn't possible. With webpack you can utilize alias config: webpack.github.io/docs/configuration.html#resolve-alias So if you add an alias, { stuff: '/path/to/stuff/' } you can require from that as if it were a top level module: require('stuff/thing/infolder.js') Here are some more solutions (some only apply to Node.js) and lots of conversation about the subject: gist.github.com/branneman/8048520
Kyle, nice video! 1. You said that `webpack-dev-server` doesn't need an output file. So this server is only for quick testing and when I think I am ready for production I must use `webpack -p index.js bundle.js` to compile the bundle.js and use it. Am I right? 2. Can you make quick video with an example of how to use `webpack` with Angularjs, jQuery and twitter-bootstrap. I guess it will be really helpful for a lot of people. Thanks in advance. Once again - great video!
+Desctar Desctar Thank you! 1. Yes, you are correct. 2. Will do! I have an idea list here: github.com/shama/letswritecode/issues/1 and am planning on more webpack ones.
+Skellingtor It depends on what you're building. IMO Browserify is better for building modules. It's stricter and focused on Node.js. So your modules will likely be more compatible or more easily consumable by others. If your building an application and want flexibility to load a wide variety of modules in a wide variety of ways, webpack would be better. I like to say, Browserify is for modules and webpack is for apps.
thank you ! Great tutorial but, I have a problem because the console show me the next : Uncaught TypeError: Cannot read property 'call' of undefined. Should I ignore it? thank for you help!
+Andrés Pinilla Thanks! That error seems to be trying to `.call()` on a variable which isn't defined. Double check the spelling and placement of the call. It should give you a stack trace to better indicate where the error originated too.
I am just starting to learn webpack and I have a very basic question. I've read and watched other tutorials and most of them use webpack.config.js to compile their scripts while you are using package.json instead. How are they different?
package.json is used primarily by npm to list the dependencies your project requires. Whereas webpack.config.js is used to configure webpack. Typically you would have both. webpack would be a dependency in the package.json and you might have a script that runs webpack, "scripts": { "start": "webpack" } so running npm start would tell webpack to start compiling. Then webpack would use webpack.config.js to determine which source files and output files it should build.
so.. this is.. how to take a simple task like loading a script..and complicate the crap out of it. Good job Derp. If is too complicated for you to order your scrips.. maybe you have other problems to solve.
5:05 - You removed "bundle.js" from the package.json so you only have index.js. So why is "bundle.js" still being referenced in your HTML when you now have "index.js"?? Is the webpack-server compiling "index.js" and renaming it "bundle.js"?? If so, then please explicitly mention this fact rather than assuming we already know. Also, is the name of the compiled file always going to be called "bundle.js"?? AGAIN, please mention these little details instead of assuming we already know. 6:43 - Why does your DIV looks like ""?? 8:54 - appendChild(bear[0]) - What the heck does "bear" represent here??? Is it the file name? Is it an Array? Can we name it something different?? Again, can you please break down your tutorials and explain these little bits instead of just flying through the code? Not all of us are JS experts and we're trying to learn. 9:20 - 1.bundle.js - You only have "bundle.js" in your HTML so where the heck is the file "1.bundle.js" being pulled from?? Is it a temporary file that's stored in memory?? And how is it being injected into the page?? AGAIN, PLEASE MENTION ALL THESE DETAILS instead of just flying through stuff!! (throws hands up) That's it... I give up. :(
+76ers It sounds like my style of teaching might not be a good fit for you. I think people learn more effectively when allowed to explore and discover details on their own. So they are purposely short and aimed to introduce to common topics of a subject. There are a lot of videos on youtube that go long deep diving into details and at least for me, I tend to zone out after about 20 mins. I understand my videos might not be for everyone.
1: "" means a empty div: "" 2: the variable 'bear' have the jQuery object wrap around it, so you cannot do vanilla appendChild. You get the vanilla DOM by referencing the 1st item in the array: 'bear[0]'
Don't worry about this guy, the tutorial is nice and succinct. Webpack isn't exactly something absolute beginners should be messing around with anyway :)
Wow. probably the best technical video I've ever seen! Gets straight to the point, no fluff, assumes a certain level of skill. You should do all the tech videos on the net!.
+R.S. Harding Thank you! :D
This is a really great intro. Been trying to understand a existing react codebase at my new job and i realised I couldn't go further without understanding webpack. Got a basic understanding of what loaders are doing. Need to learn more about code splitting and chunks now.
Thanks for this video. It really helped. Keep up the good work.
Thanks!
Best explanation ever...I've having so much difficulty switching from a LAMP stack to Node-related stack.
Concise, good speed, practical explanation. Thanks a lot, exactly what I needed.
Max Schumacher Thanks! :D
To anyone having problem with the css-loader part, please consider that you are not allowed to omit the "-loader" sufic for loaders anymore, wich requires you to use "require('css-loader!./bear.css')".
Great job! Super clear with explanations at each step. Thanks!
If you've ever wondered how to get started with Webpack, this video is for you.
This is the best tutorial for webpack beginners, which actually gets webpack running for you. Thanks a ton.!!! :)
You're the best man. This is was way better than any blog post I've read.
+Kaivon Afsari Thanks! :D
This tutorial is totally what I am looking for! Thanks for this introduction! It's really helpful!
great video. I have been using webpack for a while and learnt form such a simple walk through of webpack at it's simplest level.
+Nicholas Hill Nice!
This was a great intro for me as I am just learning about npm and modules.
This helped demystify webpack for me. Thank you for this clear tutorial!
fun and to the point, you are a good teacher sir
Great tutorial. Clear and precise. Love it.
Just don't stop doing these :)
noherczeg No plans to stop. :D Thanks for watching! :)
I curious though, does the uglified code work with Webstorm's debugger as well?
noherczeg Yep! It should as I believe WebStorm just uses Chrome dev tools via an extension. You just need to ensure you've got your source maps in order. webpack has many options for handling source maps: webpack.github.io/docs/configuration.html#devtool
Thanks! :)
Great Video Kyle - clear and succinct - thanks
Great video!!! very well explainded and really easy to understand
I have a question at 5:16.. Why isn't the output for the bundle.js is needed? I didn't understand that and the how does the index.html being rendered? Sorry I am new here
Did you find out? looking for the same info :)
I think what the webpack dev server is it injects a bundle in the page... but I'm not sure
Great question! webpack-dev-server will compile the bundle.js on demand or in other words, each time you request that file from the server it will compile and serve it to your browser. Which can be a little faster as it doesn't have to write it to the file system, have the server read it and then serve it from the file system.
It's only for development though. So when you're ready to publish your site to production, you would compile to a file instead and then serve that. Hopefully that answers your question.
thank you so much Kyle Robinson Young Alessandro Muraro
This was incredibly helpful. Thanks a lot man!
+albert275 :D
Kyle Robinson Young, YOU'RE AWESOME!
Thanks! :D
Im sorta new to a few of these things, but I have a question :
At about 5:01 you start showing how webpack-dev-server automatically re-bundles things. What would be the [difference, upside, downside] to doing this with gulp (assuming this can be done with gulp)?
great vid though. Nice pace, nice clarity.
+dfdhherhehhzdhdhtrhdhdhdshehhfdh Yep! webpack has an API in which you can integrate into gulp: webpack.github.io/docs/usage-with-gulp.html or if you want a streaming interface to webpack: github.com/shama/webpack-stream
With webpack, you don't always need a separate build tool though. If you're just using gulp to bundle/minify/compress code, webpack can do those things. Otherwise if you're doing other types of operations that webpack isn't geared for, a separate more generic build tool like gulp is useful.
The advantage webpack has is it uses a dependency graph and can do incremental builds. Where a generic build tool doesn't and has to rebuild all the files each time.
very nice without too much fluffy stuff . i wish all dev tuts are like this one not 6 hours on pluralsight or lynda. thanks. very nice
just what i'm looking for, good job for putting this up :)
+Roy lee :D
Watching this made me dance..finally get webpack, thank you!
At 12:21 you import ./base.css. Can you also in the same way import bootstrap.css from node_modules? I tried but I don't know how to do it.
Just do import from 'bootstrap/fileName.css'
No need to put './bootstrap/fileName.css
'
Thanks for your tutorial. Just a couple of questions:
1. When you run npm init, how can you get the dependencies defined in package.json right away?
2. In package.json, do we still need to specify ./index.js for webpack-dev-server since we already defined the entry point in webpack.config.js ?
Great tut !
Not sure I like some of the webpack ideas from a build perspective do I really want my css made into a js module ? I still really like gulp but am here because of browserify not handling react require well.
couldn't get npm start to build the bundle.js unless my start script reads: "start": "webpack ./script.js -o bundle.js"
First off: I really like your style of explaining. You fill up knowledge-gaps and answer a lot of my spontaneously occuring questions while watching your videos. For this video I still have a question though. That Webpack-dev-server function seems to be pretty neat, but is there a way to give it a HTML file it loads the bundle in? Or do I have to create all the HTML-tags dynamically via JS at the beginning?
+Nepomuk Leutschacher Thanks! :D
With webpack-dev-server, the index.html file is optional. If you don't supply one in the --content-base folder, it will create one for you. Otherwise if you have created an index.html file, it will use that one instead. Does that answer your question or did I misunderstand the question?
Thank you Kyle. One quick question. I am trying to run a webpack project on port 80. I am using "npm run server:prod". Using webpack config file, I changed port number to 80 - i.e. something like below
const PORT = process.env.PORT || 80;
However, whenever I run the project using npm run server:prod, it's always running on port 8080 or 8081.
Any thoughts on what I am doing wrong here, how can I run prod on port 80
Great tutorial. Are there any major changes from this tutorial when considering the new version of webpack?
Thanks and Regards
Really helpful and easy to understand
this is it! Thanks Kile! this is very helpful
Thanks a lot..
at another comment you have written: "Just do import from 'bootstrap/fileName.css'
No need to put './bootstrap/fileName.css"
so why when require jquery we just do require('jquery') no ('jquery/dist/jquery.js')?
If you leave off the `./` in the require statement it will attempt to resolve the 3rd party module. In other words, it will look for a package in the `node_modules` folder (or wherever else you've configured webpack to look).
Within the `node_modules/jquery` folder is a package.json that defines a `main` key. webpack will check for that when resolving the module (among other ways, such as a file named the same as the package or named index.js within the package, to try and find the appropriate file to load).
Check out this page: webpack.github.io/docs/resolving.html
Grea Thanks again Kyle .. also someone has said that in 2016 people stopped using requireJs so what are people using with webpack nowadays?
You can use AMD syntax (which requirejs uses) with webpack. I'd say use whatever you prefer. I personally prefer commonjs syntax (Node.js style).
A lot of people are starting to use the ES6 module syntax now too (I did a video on it ua-cam.com/video/_3oSWwapPKQ/v-deo.html). webpack can read that syntax too.
Exception tutorial, really helpful thanks :)
Excellent introduction. Thanks.
Great video, hope you follow with another one for Webpack 2
Helped me understand it a lot better. Thanks!
P.S. Anyone else keep hearing minecraft spider noises in the background?
+Smartie I may or may not have been playing minecraft while recording that video. :)
Hey Kyle, thx you're a great explainer :), what's the best 'directory' solution with webpack, so to avoid having to require relative paths such as require('../../../../../../components/annoying') ? I'm currently working on a project using vue/laravel/elixir(gulp/browserify) thinking maybe webpack is a better solution, have you got a chance to work with webpack/vue? thnx for your time !!
+whereitsfrom Thanks! I haven't used Vue too much yet. But I have ran into long paths with relative requires. The ideal solution is to structure your app to avoid having to do it. The primary reason to avoid that pattern is if someone makes a change to the require()'d upper level file, it will have cascading consequences across the app. The alternative is to structure the app into smaller standalone modules that get glued together.
Although sometimes that ideal structure isn't possible. With webpack you can utilize alias config: webpack.github.io/docs/configuration.html#resolve-alias So if you add an alias, { stuff: '/path/to/stuff/' } you can require from that as if it were a top level module: require('stuff/thing/infolder.js')
Here are some more solutions (some only apply to Node.js) and lots of conversation about the subject: gist.github.com/branneman/8048520
+Kyle Robinson Young thx! 'resolve-alias' seems to be just what i was looking for.. cheers!
thank you very much. this video help me to much!
Absolutly great presentation. Great teacher! Aboslut Pro!!
Thank you! :D
Kyle, nice video!
1. You said that `webpack-dev-server` doesn't need an output file. So this server is only for quick testing and when I think I am ready for production I must use `webpack -p index.js bundle.js` to compile the bundle.js and use it. Am I right?
2. Can you make quick video with an example of how to use `webpack` with Angularjs, jQuery and twitter-bootstrap. I guess it will be really helpful for a lot of people. Thanks in advance.
Once again - great video!
+Desctar Desctar Thank you!
1. Yes, you are correct.
2. Will do! I have an idea list here: github.com/shama/letswritecode/issues/1 and am planning on more webpack ones.
Nice video, really helpful :D 👍
what is the name of the CLI that are you using ?
So this really seems like a more powerful version of Browserify, is that a fair comparison ?
+Skellingtor It depends on what you're building. IMO Browserify is better for building modules. It's stricter and focused on Node.js. So your modules will likely be more compatible or more easily consumable by others. If your building an application and want flexibility to load a wide variety of modules in a wide variety of ways, webpack would be better.
I like to say, Browserify is for modules and webpack is for apps.
thank you ! Great tutorial but, I have a problem because the console show me the next : Uncaught TypeError: Cannot read property 'call' of undefined. Should I ignore it? thank for you help!
+Andrés Pinilla Thanks! That error seems to be trying to `.call()` on a variable which isn't defined. Double check the spelling and placement of the call. It should give you a stack trace to better indicate where the error originated too.
Great introduction to webpack, thanks!
I noticed you are using require('jquery") in the js file, so I assume that the webpack is converting CommonJS into browser recognizable JS?
+Rui J You are correct.
I am just starting to learn webpack and I have a very basic question. I've read and watched other tutorials and most of them use webpack.config.js to compile their scripts while you are using package.json instead. How are they different?
package.json is used primarily by npm to list the dependencies your project requires. Whereas webpack.config.js is used to configure webpack. Typically you would have both.
webpack would be a dependency in the package.json and you might have a script that runs webpack, "scripts": { "start": "webpack" } so running npm start would tell webpack to start compiling. Then webpack would use webpack.config.js to determine which source files and output files it should build.
Thank you, great video! :)
Thanks, it's such a nice video!
Thanks!
wow simple and awesome!
thank you!
+සසිත වත්මල් Thanks!
By now, npm start of the package.json file should be : "start" : "webpack ./index.js -o bundle.js"
lack -o
Really nice tutorial! :D
which terminal are you using in mac?
It's the regular Terminal app but I've modified my dotfiles a bit. They are really similar to github.com/paulirish/dotfiles though. :)
Awesome tutorial! thanks a lot :)
Good job man!
Super video, thanks
i've done many javascript courses but i still consider myself a beginner and i have no clue what you're doing here
Start by checking out how NodeJS works. Then it will make more sense.
10x dude, great video
Thanks Kyle, you saved me
you kinda sound like the Green Hornet movie actor Seth Aaron Rogen
Funny enough I've heard that before, listen to the beginning of this previous video I made: ua-cam.com/video/c9j0avG5L4c/v-deo.html
things have changed in 2018
Great video 👍
+Fernando Marquez Thank you!
so.. this is.. how to take a simple task like loading a script..and complicate the crap out of it. Good job Derp. If is too complicated for you to order your scrips.. maybe you have other problems to solve.
Wonderful!
Great video
+Lars Rye Jeppesen Thanks!
谢谢谢谢，学习了。
+Tong ao 感谢您的收看
Awesome.
really awesome!
5:05 - You removed "bundle.js" from the package.json so you only have index.js. So why is "bundle.js" still being referenced in your HTML when you now have "index.js"?? Is the webpack-server compiling "index.js" and renaming it "bundle.js"?? If so, then please explicitly mention this fact rather than assuming we already know.
Also, is the name of the compiled file always going to be called "bundle.js"?? AGAIN, please mention these little details instead of assuming we already know.
6:43 - Why does your DIV looks like ""??
8:54 - appendChild(bear[0]) - What the heck does "bear" represent here??? Is it the file name? Is it an Array? Can we name it something different?? Again, can you please break down your tutorials and explain these little bits instead of just flying through the code? Not all of us are JS experts and we're trying to learn.
9:20 - 1.bundle.js - You only have "bundle.js" in your HTML so where the heck is the file "1.bundle.js" being pulled from?? Is it a temporary file that's stored in memory?? And how is it being injected into the page?? AGAIN, PLEASE MENTION ALL THESE DETAILS instead of just flying through stuff!!
(throws hands up)
That's it... I give up. :(
+76ers It sounds like my style of teaching might not be a good fit for you. I think people learn more effectively when allowed to explore and discover details on their own. So they are purposely short and aimed to introduce to common topics of a subject. There are a lot of videos on youtube that go long deep diving into details and at least for me, I tend to zone out after about 20 mins. I understand my videos might not be for everyone.
1: "" means a empty div: ""
2: the variable 'bear' have the jQuery object wrap around it, so you cannot do vanilla appendChild. You get the vanilla DOM by referencing the 1st item in the array: 'bear[0]'
what a beautifullll green :)
Dude... please forget the bears... everyone watching this can understand without a fkin bear
+vlady100k I bearly talk about them.
***claps***
I think the tutorial can be much more simplified for beginners
ok
Don't worry about this guy, the tutorial is nice and succinct. Webpack isn't exactly something absolute beginners should be messing around with anyway :)
Thanks a lot! Very helpful!