Webpack Tutorial – Replace Gulp/Grunt plugins with a single tool



Webpack has quickly become one of the most popular choices among web developer build tools. It can quickly build, minify, split & do a whole wonder of other things to your code.
Sample Webpack Config: https://gist.github.com/learncodeacademy/25092d8f1daf5e4a6fd3
Node.js Introduction: https://www.youtube.com/watch?v=pU9Q6oiQNd0

In this webpack tutorial, I'm going to cover a very basic configuration for webpack that will get you started in a project. It will build all of your Javascript and minify and dedupe the code for production. To code react, we just have a little more configuration to add to our webpack config. That will have a full HTML, CSS, JS react application going.

Another great build tool is Browserify, which at the beginning of the process works a LOT like Webpack, but in the end, Webpack is a lot more featureful.

code source

  • After using the command: npm install webpack -g
    I get a throw error: Cannot find module 'webpack'
    Anyone know why?

    View Comment
  • Hey bro, I have two html pages and corresponding 2 js pages.. Both these pages requires React and Redux. Now here the problem arises.. Both these js pages translates into js bundles in which react and redux is present… That duplicated React and Redux code for both these pages.

    I want to create bundle of js pages (excluding React and Redux) and a separate bundle for React and Redux js separately which is used by both these js pages.. Is that possible?

    View Comment
  • Do you use something customized for you terminal because it looks neater or more colorful. are you planning on making indepth terminal videos because its one of those basic things but we developers probably use it the most out of any tool.

    View Comment
  • Concise and well structured.

    View Comment
  • If web development doesn't work out for you then maybe consider a singing career? Great vid, thanks!

    View Comment
  • I've followed all the steps that you took but I get this error in the chrome web tools

    Uncaught ReferenceError: require is not defined

    Not really sure how to proceed with this.

    View Comment
  • does webpack replace gulp/grunt?

    View Comment
  • It looks exactly like Browserify, why should I switch?

    View Comment
  • Great video, I started reading the webpack documentation and nearly gave up, but this video is precise and to he point. Great introduction cheers.

    View Comment
  • This looks cool, just a few days ago I spent such a long time configuring a gulpfile, this seems so much faster and more efficient.

    View Comment
  • When you installed jquery and lodash where did the jquery and underscore js get installed locally i am confused ?
    Also how could jquery syntax work and when u checked in console the $ was not to be found , how could jquery work here i am a bit lost here. Can you please elaborate.

    View Comment
  • Great, I used the same to create one sample app using MithrilJS and Webpack… I am so enlightened right now :) Thanks Will

    View Comment
  • Cool. Great video.
    "If I can turn back time."
    Not a bad high note also.

    View Comment
  • What Sublime Text theme you using?

    View Comment
  • this video made me a subscriber. Thank you so much and keep going like that!

    View Comment
  • 1:37 "If I could tuuurn back tiime" Made me chuckle :D

    View Comment
  • Your videos are always so concise and informative. Thank you so much for your contributions to the community and keep up the fantastic work.

    View Comment
  • Why should I use this over angular?

    View Comment
  • Pretty cool thing to know but I don't think it can replace Grunt/Gulp since it's not possible to compile css preprocessors with it.

    View Comment
  • How did you get the sidebar icons in Sublime Text?

    View Comment
  • Great Vid!

    Changing the NODE_ENV=production doesn't work for me though (Windows). Unrecognised command so am stuck to the unminified output unless I hard code the minification step. That bit was glossed over IMO

    Is this stuff all necessary if just trying to learn React?

    Thanks again bro.

    View Comment
  • Wow i can't believe how fast tools in web dev. change. Things will be popular for 1-2 years and then their phased out.

    View Comment
  • Thank you for explaining this in a super simple manner :) I've just started a react project, and I'm looking to have an environment that is easily configured to be production ready. fingers crossed for the rest of your react tutorials (And keep up the awesome work! :))

    View Comment
  • never used a build tool … now I'm hooked. Great video!

    View Comment
  • I've watched nearly all of your videos!
    I plan on buying you a few cups of coffee soon.
    Keep up the awesome work!

    View Comment
  • good , thanks!

    View Comment
  • Hey Will!,
    What bash terminal and theme are you using for NPM? It looks sick!

    I'm using the new Git Bash 2.7 (windows), I'd like to be able to steez' it up though.

    As always, great video. Keep up the badassery'

    View Comment
  • Hi, if anyone could help me out with this beginners JavaScript question then it'd be great. What's the best way to make a prompt which allows the user to add a value and index in an array variable. Sorry, tell me if this question doesn't make sense.

    View Comment
  • I agree with you, Webpack is pretty awesome and it's the only tool I use to compile ES6 and React, although I wish these tools became a lot easier to setup and use. It seems to me that people waste too much time setting up these tools and that would be better used working on a project.

    View Comment
  • please do react and redux. Love your videos!

    View Comment
  • Good to see you back Will!! Hope you had a good Christmas/new years!

    View Comment
  • React is awesome, love it!

    View Comment
  • pleas make WATCH THIS IF YOU WANT TO BECOME A WEB DEVELOPER! 2016 edition.

    View Comment
  • Great video! Where did you find that sweet looking theme for iterm?

    View Comment
  • great stuff as always, Will! Looking forward to the React videos! Cheers!

    View Comment
  • Great tutorial.

    View Comment
  • Happy news years. React looks like a challenge.

    View Comment
  • I've put a lot of time into react lately, fitting it with redux and redux-router then producing a universal app, its all complicated stuff and as many things were alpha the API kept changing under me, I did love it tho. Im now learning Angular2 to see if they've improved it compared to react, have you tried it? If Angular2 turns out to be on par it would be better to use that right as its more framework complete so wont need to keep so many dependencies up to date.

    View Comment
  • wow, so excited for the React series, have been waiting for it.
    quick questions:
    Are you going to do React in ES6?
    How many parts is the Series gonna be?
    Will you be covering advanced React stuff and Flux, Redux?

    You are awesome man, cheers

    View Comment
  • I don't quite see how Webpack is superior to Gulp/Browserify and why Webpack is better for React.

    View Comment
  • f*** love it, thanks bro

    View Comment
  • Great video, i've implemented it in my latest project. When I use nodemon, how do I automatically run the command webpack? Now with every change in the client is I've to reboot the webpack to compile the .min.js file

    View Comment
  • What theme do you use for Sublime Text? It looks good.

    View Comment
  • Awesome…
    Can i have a name of your sublime text theme and Font??? It's beautiful

    View Comment
  • Awesome video. I have a few questions though?
    1. Can you show us how you handle css?
    2. Can webpack generate sprite sheets?
    3. Does webpack have a watch feature like gulp?

    Thanks and looking forward to more.

    View Comment
  • I like this. But why not use ES6 module loading instead of require via Babel?

    View Comment