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.

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.

-~-~~-~~~-~~-~-
Also watch: "Responsive Design Tutorial - Tips for making web sites look great on any device"
-~-~~-~~~-~~-~-

[qwertyasdf]

never used a build tool ... now I'm hooked. Great video!

[eirini]

You had my thumbs up already since 1:38 .

[kairoswave]

Thanks for these tutorials! just got offered a internship and I need to learn React, you explain this so well and make it entertaining thank you!

[techstacker]

Wow Webpack looks pretty sweet, definitely going to try this, thanks Will!

[eshwarenmanoharen]

If you are watching this after 26th May 2017, please use this config file instead.


var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');

module.exports = {
context: __dirname,
devtool: debug ? "inline-sourcemap" : false,
entry: "./js/scripts.js",
output: {
path: __dirname + "/js",
filename: "scripts.min.js"
},
plugins: debug ? [] : [
new webpack.optimize.OccurrenceOrderPlugin(),
new mangle: false, sourcemap: false }),
],
};



Why? Because this tutorial is on Webpack 1. We just need to tweak slightly to make it work with Webpack 2.
Changes


1. debug ? "inline-sourcemap" : false, <-- used to be null
2. removed dedupe plugin - it's no longer needed.

Hope this helps.

[michaelganesan]

I like your speed at which you did an intro for web pack. Rock on!

[matheushrt]

Hey Will, thank you so much. Your videos are awesome, and i'm starting to deal with Webpack now, my productivity is in another level now, thanks to you and Webpack!
Great work!

[LondonAppDeveloper]

This is really useful. I recently started learning ReactJS and I was a bit confused as to what is happening behind the scenes. This video explained it perfectly.

[awc]

Another great tutorial & explanation. Even more impressive, being able to hit the "if I could turn back time" note @ 1:38

[EdwardRamkissoonIRL]

Hey dude, these vids are super helpful! I'm building my first app with React, and your vids are coming in very handy.

[JohnBeau]

Love your videos, you always help me. Keep it up!

[LorenzoJimenez]

Delightfully simple explanation! Thanks!

[lucasbittar]

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

[GifCoDigital]

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

[eojeel]

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

[nicken]

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! :))

[Alex-fskz]

Awesome tutorial! Thank you for clarifying webpack! :)

[jbieIsHere]

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

[jaredc]

Thank you for all of these awesome videos breh breh!!!

[Phrakture]

Your tutorials are awesome man, you are a very great teacher