Learn Webpack - Full Tutorial for Beginners

Поделиться
HTML-код
  • Опубликовано: 31 дек 2024

Комментарии • 561

  • @Elluzive
    @Elluzive 5 лет назад +358

    Colt is responsible for me going down this web development rabbit hole. I have not seen daylight in a year.

    • @dailydevelopershow
      @dailydevelopershow 5 лет назад +2

      @@neilt1352 Hahaha

    • @igorsushko1356
      @igorsushko1356 5 лет назад +5

      "You can learn this 6 topics and work like frontend developer" - spoke they, haha

    • @rethabilencheke2338
      @rethabilencheke2338 5 лет назад

      @@neilt1352 Hahahaha

    • @lycan2494
      @lycan2494 5 лет назад +2

      no you are responsible for what you have done for yourself. not colt. not anybody else.

    • @zarrar1825
      @zarrar1825 4 года назад +8

      Innocent its a joke jeez who hurt you?

  • @asoluka_tee
    @asoluka_tee Год назад +6

    The best video on webpack I have seen so far.
    When following this video (in 2023), at the point where we use file-loader, you might experience a bug that causes your webpack to build two asset files and then link to the wrong one.
    This is due to webpack 5 adding functionality to load assets by default.
    To resolve that error, add this to the rules array,
    {
    test: /\.(svg|png|jpe?g|gif)$/i,
    type: "asset/resource",
    },
    and remove the file-loader config completely.

  • @pouyajabbarisani
    @pouyajabbarisani 4 года назад +213

    It's about 4 years since I'm using webpack but today I've actually learned it!

  • @zionsandeep788
    @zionsandeep788 3 года назад +58

    Just halfway through the video and I've already understood more than what I got from a paid Udemy course. Though this video is 2 years old, its a fantastic starting point for anyone willing to learn Webpack!
    Colt, you're an absolute legend. Thanks!

  • @ayushsaini9798
    @ayushsaini9798 3 года назад +5

    This is still relevant in 2021. Thank you Colt!!!
    For people watching this, there are few things you might want to know:
    - with webpack 5, you can use asset modules instead of file-loader
    - use output.clean instead of clean-webpack-plugin

    • @andrsgarc
      @andrsgarc 3 года назад +1

      thanks I was looking for this comment :D

  • @CalmedByNature
    @CalmedByNature 5 лет назад +5

    Spent the whole day searching for a tutorial this good. Thank you.

  • @LyadhKhorEngineer
    @LyadhKhorEngineer 5 лет назад +12

    Colt is the reason why I was able to get back into Coding. Thanks for being an awesome instructor in Udemy and everywhere.

  • @TazExprez
    @TazExprez 4 года назад +76

    Great tutorial! Thank you so much!
    Needed to use
    const {merge} = require("webpack-merge");
    instead of
    const merge = require("webpack-merge");
    Just a heads up in case you get any errors.
    Webpack now minifies your production code by default. I still watched until the end of the tutorial to learn more.

    • @jordanski5421
      @jordanski5421 4 года назад

      Thanks that fixed my issue, where did you get that info? I'm interested in finding out exactly why this change occurred.

    • @ahmetozturk5178
      @ahmetozturk5178 3 года назад

      @@jordanski5421 check the official docs

    • @jordanmowry9164
      @jordanmowry9164 3 года назад

      Thanks. I was stuck for a while and couldn't figure out how to move forward.

  • @benjaminmoseslieb9856
    @benjaminmoseslieb9856 3 года назад

    One of the best tutorials I've ever watched. And I've watched 15 years worth of tutorials. Thank you so much, subscribing.

  • @runningfox4049
    @runningfox4049 3 месяца назад

    I've developed my own site from scratch and thanks to people like you and FCC makes it possible. I'm forever indebted. Thank you

  • @JoseNario
    @JoseNario 4 года назад +7

    Easily the best webpack introduction I've seen, hands down.

  • @nikhilhukkerikar6753
    @nikhilhukkerikar6753 3 года назад

    The video description should actually say "Explaining the Abstract framework Webpack"
    Seriously this is one of the best tutorials on Webpack I've come across that explain the concepts and architecture! Thank you!

  • @CodeGoblin
    @CodeGoblin 3 года назад +48

    0:36:10 had to use "devtool": false, instead of none due to a breaking change in the latest webpack.
    1:15:04 latest webpack 5 package.json script: "start": "webpack serve --config webpack.dev.js --open",
    1:24:30 file-loader not needed in webpack 5: Add the following to your webpack.prod.js file
    module.exports = merge(common, {
    mode: "production",
    output: {
    filename: "main.[hash].js",
    path: path.resolve(__dirname, "dist"),
    assetModuleFilename: "./imgs/[name].[hash].[ext]",
    },
    });
    1:42:05 optimize-css-assets-webpack-plugin not supporting webpack5, use css-minimizer-webpack-plugin instead per maintainers.

    • @vijaynavale1079
      @vijaynavale1079 3 года назад +1

      thanks buddy

    • @Andre-px6hu
      @Andre-px6hu 3 года назад +1

      thanks a lot man, I didn't understand why my images weren't loaded ahaha

    • @abdallahabdedaiem51
      @abdallahabdedaiem51 2 года назад +1

      I've just fixed devtool, and was curious if anyone had same issue, then I've ssen this. You Rock!

    • @jasonhoi85
      @jasonhoi85 2 года назад

      I will use devtool: 'inline-source-map' to make it look similar in webpack 5 (yes I know your tutorial at the time is at webpack 3)

    • @pranavc747
      @pranavc747 8 месяцев назад +2

      1:11:53 merge is being imported as a named function {merge} now instead of default const merge = ...

  • @lilrex2015
    @lilrex2015 4 года назад +7

    Wow, this 2 hr video took me 5 days to get through, but I enjoyed every second of it and this helped me soooooo much.

  • @davidrodriguezramirez1941
    @davidrodriguezramirez1941 2 года назад

    Not only I learned a lot, really a lot with this tutorial, but also I laughed a lot too, man, you're amazing and you gain a new follower

  • @dangolekhayotango1656
    @dangolekhayotango1656 5 лет назад +32

    Love u colt Steele..Ur web developer bootcamp in udemy is awesome. love from Nepal

  • @dankokozar
    @dankokozar 3 года назад +1

    Best Webpack tutorial online. Right order of features and the right pace. Kudos!

  • @noraneco6762
    @noraneco6762 Год назад +1

    This helped me so much while I was having trouble making sense of the webpack official documentation and couldn't figure out where to start. Thanks so much!

  • @chiragparyani7546
    @chiragparyani7546 2 года назад +1

    Best 2 hours spent on a video tutorial in months! Loved it. Thanks Colt!

  • @tmchecki8610
    @tmchecki8610 3 года назад +2

    the best webpack for me! I watched around 10 other tutorials and this one is the best.

  • @martinpenev6750
    @martinpenev6750 3 года назад

    So far this is one of the best and most comprehensive tutorial and explanation of Webpack. I learned so much here.

  • @sachindev0072002
    @sachindev0072002 5 лет назад +2

    This video is a very good starter for every aspiring web developer. Extremely helpful for me personally. It's a one pill solution to learn Webpack in 2 hours. Great work Colt!!

    • @fer86bd
      @fer86bd 4 года назад +1

      Sorry to bother you, but if this is a good starter point what would be the next step for learning it moe deeply? please, its so dificult to find something more advance!!

  • @ORNSTAIOAO
    @ORNSTAIOAO Год назад +2

    I'm a webpack newbie and this video was a HUGE help! I can't thank you enough!

  • @mehulgala07
    @mehulgala07 4 года назад +10

    This guy is amazing! Thoroughly enjoyed the mini-course. I must confess I was always a bit intimidated by Webpack but this guy has taken away my mental demons. The content and structure of this course is amazing! Loved it! Thanks, Colt, you are amazing !!!

  • @bhaaratsharma6023
    @bhaaratsharma6023 Год назад

    This guy is one of the best tutors out there.

  • @juang_
    @juang_ 4 года назад

    I've been using webpack for a couple of days without actually knowing what was going on until I found your tutorial. Thank you good sir!
    As a side note a couple of things do not work with latest version of webpack but just google the problem and fix it.

  • @matthewstaton6810
    @matthewstaton6810 4 года назад +7

    Love this man. Introduced me to this industry. Appreciate it, Colt.

  • @navead30
    @navead30 4 года назад

    One of the better introduction to webpack. Suddenly the webpack blackbox is more clear.

  • @onlyjan9327
    @onlyjan9327 2 года назад

    I am in the last year of my school to be an electronic engineer while studying web development on my own. I've always had trouble with bad teachers and administrative management because usually, I feel I'm losing time and that the people that suppose to be our mentors don't care about us.
    Around minute 40:00 I genuinely started crying, I couldn't stop it, thinking why I don't have such an amazing teacher at school.
    I'm still crying, so I only can say THANK YOU!!!

  • @asmasupih5344
    @asmasupih5344 2 года назад

    I just finished watching this tut (October.2022). its the best webpack tutorial I have ever seen !
    I just want to point at some things:
    * for merge, I had to import it this way: const { merge } = require('webpack-merge'); or it game me an error.
    * I had to use css-minimizer-webpack-plugin rather than optimize-css-assets-webpack-plugin, you might need this if you are using a new version of webpack.

  • @psychoedge
    @psychoedge 4 года назад +2

    Handy down one of the best tutorials I've seen on web technologies. Thanks for making me able to set up a webpack project in a glimpse

  • @AlexanderDemin
    @AlexanderDemin 4 года назад

    Once again, just finished the course in the "coding along" mode. The fantastic course! Recommended.

  • @ricardodasilva9241
    @ricardodasilva9241 4 года назад

    This is the best webpack tut I have seem so far. I hardly find a article/video with the proper project source and commits. Hope to see more stuff like this with babel for example.

  • @anand_dudi
    @anand_dudi 2 года назад

    wow what a instructor .define every thing in depth details

  • @aj98767
    @aj98767 4 года назад +1

    1:15:17 where he changed the start script. If you're using webpack 5 then it should be 'webpack serve' instead of 'webpack-dev-server'. I just thought that watching this course while scanning the official docs really helped me alot.

  • @red_cape.
    @red_cape. 3 года назад

    Man your content is amazing, you are a spetacular teacher, this subject seems like japanese to me and now it is so mutch simpler to understanding it. Thank you!

  • @Same7ashY
    @Same7ashY 3 года назад +1

    Always on point, Colt!
    In my opinion, this is the only tutorial one would need to understand how webpack works.
    Thank you for such a great tutorial.

  • @aadisriram
    @aadisriram 4 года назад +1

    I decided to switch my career over and my first task on my new role was to upgrade Webpack! I looked at the docs for 2 days, read the existing codebase for a few more days and ended up with nothing. Saw this video and literally everything that I read over the last few days makes sense!

  • @kevinwagner5023
    @kevinwagner5023 3 года назад

    this is such an excellent introduction to the basics and theory of webpack, enough to get a person up and running with their own project or able to competently interact with a current webpack configuration. It's just under 2 hours of video time, however I spent probably a told of 5 hours setting things ups, coding along, etc. Very well worth it

  • @tylercode2207
    @tylercode2207 2 года назад

    You are really a good teacher...This is one of the best tutorials out there in general...Keep up the good work brother!

  • @alibek1545
    @alibek1545 3 года назад +1

    if you're using webpack-cli 4 or webpack 5, change webpack-dev-server to webpack serve.
    Example:
    "serve": "webpack serve --config webpack.dev.js --open"

  • @birwinz
    @birwinz 2 года назад

    Best Webpack tutorial I have viewed

  • @Andres_Janun
    @Andres_Janun 3 года назад

    Wow I took 4 days to go through this tutorial and at first I tried to solve the things by myself and then I watched How He did it and at the end of the course I felt like I learnt something really powerfull and uselul , so I just want to say Thank You, by far the best explanation I have ever seen on webpack.

  • @sashengovender2401
    @sashengovender2401 5 лет назад +7

    This tutorial helped me more than you can imagine. Thank you very much sir!

  • @MrFunasty
    @MrFunasty 4 года назад

    This is the most comprehensive and helpful webpack turorial on youtube !

  • @mehra.akshit
    @mehra.akshit 5 лет назад

    Struggling to grasp the basic concepts of Webpack, I found this video! Best of the best step-by-step explanation. Thank you!

  • @Spykerel04d
    @Spykerel04d 3 года назад +2

    If anyone is having problems with "merge-webpack"..
    On Webpack +5 you must destructure the merge function and CleanWebpackPlugin from the package import:
    const { merge } = require('webpack-merge')
    const { CleanWebpackPlugin } = require("clean-webpack-plugin");
    Also, you may have problems with "webpack-dev-server". Instead, you can use "webpack-serve" (without the final 'r')

  • @bssushmitha6534
    @bssushmitha6534 4 года назад +1

    Very well explained Colt. Thank you for this tutorial. I highly recommend anyone who wants to learn a webpack, or start understanding it.

  • @anmolrastogi380
    @anmolrastogi380 4 года назад

    This is perhaps the best webpack tutorial i have watched. Thank you Colt

  • @theYOFFLISES
    @theYOFFLISES 4 года назад

    I fully agree this amazing video brings a big deal to deeply understand what to do with WebPack for a highly tuned bundle.
    Now when I bootstrap a new project for example with Vue CLI, it gives a profound understanding of how this all is scaffolded.
    However for those who now consider themselves as kind of Webpack ninjas (as seen in the comments), I would say, speaking about me first, we are still miles away to understand how plugins, loaders, etc work and articulate themselves. Another big step required to master this as well.
    Another step would also be to understand the why and how of source maps.
    Some comments:
    1/ I noticed css-loader is not strictly necessary for me, before style-loader which injects into the DOM (on a project using no sass but post-css to have modern CSS compatible with IE). However, strangely, MiniCssExtractPlugin.loader requires it.
    2/ Speaking about vendor.js, I was surprised we need to explicitly install dependencies (such as jquery and popper) to make bootstrap work. It looks it kind of defeats dependency management which primary purpose is to handle this. My hope is this need is limited to first tear of dependencies not the whole tree when many dependencies are involved.
    3/ In the production configuration, HtmlWebpackPlugin was inserted in the optimization section. It works. However seems more logical for me to place it in the plugins section. It works too.
    Finally, thank you for this fantastic video. It has it all. Highly recommended.

  • @AshishKumar-UI
    @AshishKumar-UI 4 года назад +1

    This is one of those amazing tutorials I have watched so far in my entire career. Thank you so much for this detailed explanation. you are awesome...!!

  • @Ipod19953
    @Ipod19953 4 года назад

    The best webpack course I have ever seen

  • @joelfernando9905
    @joelfernando9905 4 года назад +1

    Thanks, thanks and thanks! Literally 2 weeks trying to learn Webpack and just with this course in one day i feel pretty confident to start my own projects and sticking with the docs to do awesome things with module bundling. As always Colt never fails :D

  • @justinturner2271
    @justinturner2271 4 года назад

    Great video for mid-software dev who has to start using webpack. Subscribed and will watch any other full/crash courses you publish.

  • @maiaklimenko6614
    @maiaklimenko6614 3 года назад

    This is the best thing I cam across as a new developer. Webpack is indeed intimidating for the newbies, but I think I am pro at it after this video (not really, but we are definitely getting there!) ;)
    Thank you so much!

  • @farhan_jiwani
    @farhan_jiwani 4 года назад

    Very good tutorial and it covered a LOT but it was easy to ingest at the pace you took. I have already shared it with a few people who may benefit from this.

  • @gabrielfono844
    @gabrielfono844 4 года назад

    damn
    this is awesome.
    hopefully, I will break down my interview at facebook , uber and capital one
    thanks colt.
    I read the doc and I thought I knew everthing but the way that you have explained it make me think that there are people really talent out there and I should follow them.
    this is the first course I took to you because I always think I am smart enough to figure everything out on my own.
    I really appreciate your efforts.

    • @bodhisatwabarma1156
      @bodhisatwabarma1156 4 года назад

      Where do you apply for these interviews ? Help out a bro from the 3rd world 😬

  • @yunusde
    @yunusde 5 лет назад +59

    Webpack always intimidates me, but now i am like "I know Kung-Fu". thank you so much.

    • @permanar_
      @permanar_ 5 лет назад

      IKR DAMN😂

    • @lycan2494
      @lycan2494 5 лет назад

      too bad u only scratched the surface

    • @lubomirpacheliev363
      @lubomirpacheliev363 3 года назад

      @@lycan2494 what do you mean *trembles*

    • @lycan2494
      @lycan2494 3 года назад +1

      @@lubomirpacheliev363 u should be frightened!

  • @jwolfe890
    @jwolfe890 4 года назад

    easily the best webpack course on the web. thank you.

  • @kestonneunie
    @kestonneunie 3 года назад

    Great course, and like many people have commented, you have really helped to demystify the webpack setup in such a simple way and also show us useful things we can do with it - top guy!

  • @srinivasb3845
    @srinivasb3845 3 года назад +1

    Highly recommend this video to get started with webpack.

  • @mttrchrds
    @mttrchrds 5 лет назад +2

    Hey Colt, thanks for the tutorial. Really great and super useful.
    One bit of feedback: right at the end when you are minifying the HTML. You move "new HtmlWebpackPlugin()" from "plugins" in the common webpack config, and add it to "plugins" in the dev config - but in production you add it to "optimization.minimizer" instead of "plugins" which I found strange. It all seems to work great but an explanation why in production it is located in a different location would be really useful.
    Cheers, Matt.

  • @luancardosolc
    @luancardosolc 4 года назад +1

    Really nice!! He explains how everything works instead of just do the things, it give us a better understanding.... tks a lot!!!

  • @DarrenLewisHarris
    @DarrenLewisHarris 5 лет назад +3

    Best tutorial I've encountered on this subject. Been following along while building an AngularJS app and it's been perfectly clear. Thank you!

  • @jordanlewis3530
    @jordanlewis3530 3 года назад +1

    To anyone reading comments after me, around the 1 hr 15 mark, the script
    "start": "webpack-dev-server --config webpack.dev.js --open"
    should now instead read:
    "start": "webpack serve --config webpack.dev.js --open"

  • @seephor
    @seephor 3 года назад

    Great tutorial. Webpack is one of those development tools that becomes a development project on its own.

  • @Wardret
    @Wardret 4 года назад

    great quality content, give this man a money raise

  • @saumyaverma9581
    @saumyaverma9581 3 года назад +2

    I don't know but if this guy will teach any difficult thing . I'm gonna learn it.

  • @saddamhossain6270
    @saddamhossain6270 4 года назад

    Great tutorial. he has explained everything properly where everyone can understand.

  • @lightningresaba146
    @lightningresaba146 5 лет назад

    I'm new to web dev and i like what webpack can do, the tricky part is configuring it,
    but i like it so this is gonna be my workflow now, i might add some templating engine like handle bars too, currently I'm taking your algo data structures master class,
    tnx Colt!

  • @senthilkumaripaulsami5737
    @senthilkumaripaulsami5737 4 года назад

    Thank you for such a clear explanation. I learned a lot of stuff about webpack. I had to actually set up a new app with custom configurations. It was very daunting and intimidating. Then I found this video. This helped a lot in setting things up.

  • @roydonk2878
    @roydonk2878 4 года назад

    Thank you for taking such an intimidating concept and breaking it down step by step in an easy to digest and follow along away. And thank you even more for then providing that content for free.

  • @pixycz
    @pixycz 3 года назад

    Excellent tutorial! Finally, I have the idea about Webpack now, I'm starting understand all the copy-paste black magic I've bee doing for years. Thank you!

  • @szymonadamczuk5367
    @szymonadamczuk5367 4 года назад

    Scary topic explained in a very simply and calmly. Love the tone of your voice @ColtSteele

  • @YinonOved
    @YinonOved 4 года назад

    Glad I found this course by colt Steele. Couple of years back I went through his js algorithms and data structures course and it was so clear and fun to learn

  • @kylehenson2259
    @kylehenson2259 4 года назад

    actually one of the best webpack tutorial , i appreciate it

  • @thecodecatalyst
    @thecodecatalyst 5 лет назад

    Thanks Colt Steele, You just cleared a black blur in my career, thanks a lot this is of great help!

  • @juliojordan
    @juliojordan 3 года назад

    Thanks!

  • @nora8200
    @nora8200 11 месяцев назад

    Thanks a lot!

  • @berenjor
    @berenjor 4 года назад

    This is such a useful video. Detailed explanations of what does what and why.

  • @shubhamshekhar23
    @shubhamshekhar23 2 года назад

    My mind is blown, I learnt a lot from this tutorial. I was always afraid of webpack.

  • @satyaprakashsahoo7772
    @satyaprakashsahoo7772 2 года назад

    Wow it's really so easy to understand from you Sir.. Thanks from India

  • @balanceiseverything2565
    @balanceiseverything2565 4 года назад

    Love this tutorial. Demystified a lot about Webpack. Thank you Colt Steele.

  • @onedimensionalchess4373
    @onedimensionalchess4373 5 лет назад

    Awesome course. I might have to review it, but I can see why ppl like Colt Steele.

  • @glennsep
    @glennsep 4 года назад

    Great introduction. I learned a lot and believe I have a foot hold into getting a start with Webpack. Your cat is awesome!

  • @distantstorm88
    @distantstorm88 2 года назад

    This really helped me! Thanks for taking the time to do this video tutorial!
    On thing I would have loved to have seen is using multiple loaders for the same file type, however I am guessing you just have to tweak your regular expression.

  • @bippansingh6519
    @bippansingh6519 2 года назад

    After 2 years still better than other paid courses.

  • @prafullaraichurkar4369
    @prafullaraichurkar4369 3 года назад

    The content and the structure of this course is Amazing!
    Thank you Colt :)

  • @san-chil
    @san-chil 3 года назад

    Awesome tutorial ...Has all the foundational basics needed to build a Javascript project .!!!

  • @tdeep01
    @tdeep01 Год назад

    Loved your content bro literally life and job saving. Much love much thanks ❤❤❤❤

  • @md.tahmidmozaffar9135
    @md.tahmidmozaffar9135 4 года назад

    Wow...!!! Very well explained tutorial. Learned a lot and enjoyed every bit of it. Thank you very much.

  • @GuilhermeCarvalhoOnline
    @GuilhermeCarvalhoOnline 5 лет назад

    Amazing tutorial! Webpack was a kind of abstract tool for me, because I usually use CLI's. But not anymore, because I've seen here Webpack so easy to code. Thanks, man. Well done! :)

  • @vcizek6047
    @vcizek6047 4 года назад +1

    What a fantastic tutorial and an amazing tutor. This is great quality tutorial, thank you!

  • @alvin_lal
    @alvin_lal 3 года назад +3

    Please note that file-loader is deprecated as of webpack 5 , it has been replaced by Asset Modules which comes built in with webpack 5. So for those of you whose images are not being included correctly , remove file-loader module from webpack.common.js while keeping the html-loader and add
    {
    test: /\.(svg|png|jpg|gif)$/,
    type: "asset/resource",
    },
    Also, add assetModuleFilename: "images/[name].[hash][ext]" to the output field of webpack.prod.js to generate filenames with hash like
    output: {
    filename: "main.[contenthash].js",
    path: path.resolve(__dirname, "dist"),
    assetModuleFilename: "images/[name].[hash].[ext]",
    },
    And also add assetModuleFilename: "images/[name][ext]" to webpack.dev.js to avoid generating hash while on development mode , like
    output: {
    filename: "main.[contenthash].js",
    path: path.resolve(__dirname, "dist"),
    assetModuleFilename: "images/[name][ext]",
    },

  • @joseespejo3366
    @joseespejo3366 2 года назад

    Thanks

  • @Thomas-mk9cu
    @Thomas-mk9cu 4 года назад +2

    Great Video!
    Just a small hint instead of:
    var CleanWebpackPlugin = require('clean-webpack-plugin')
    I had to use
    var {CleanWebpackPlugin} = require('clean-webpack-plugin')

    • @chiranjitdey1430
      @chiranjitdey1430 4 года назад

      There is a german footballer with the same as yours.

  • @bernardoapelt
    @bernardoapelt 3 года назад

    Thanks a lot, for the first time I learned how to use properly Webpack

  • @eip408
    @eip408 2 года назад

    Very satisfying and informative! This is all what I wanna know. Thanks Colt!🙌🏼

  • @noopurp123
    @noopurp123 4 года назад +1

    If you are using webpack-cli > 4.0.0 and webpack-dev-server >= 3.11.0, use the following command in the package.json to use webpack-dev-server:
    "start": "webpack serve --config webpack.dev.js"

  • @jayliang5737
    @jayliang5737 4 года назад

    Awesome! Best webpack video I've seen so far!