Webpack for The Fast and The Furious

Ashwin Hariharan
Feb 11, 2016 · 7 min read
Image for post
Image for post

Also published in my tech blog

This is a guide that is meant to help you ease your development workflow and save your time by using a bunch of awesome tools that you’ve read about on the internet (does React Hot Loader ring any bells?)

It’s also meant to help you out with some of the most commonly encountered problems while using Webpack — and save some time in the process before you begin to pull your hair out. After all, you want to go fast and tear through other important problems.

Chances are that you’ve run into one or more of the following issues:

If you’re running into these difficulties, finish this article before you resort to posting one of these questions on Stack Overflow.

Image for post
Image for post

I’m assuming that you already know about the advantages of Webpack and what it is used for. If you’re a beginner and have no clue about what Webpack is, I highly recommend reading about it here.

I’m also assuming that you’re building a web app and not just some static page, which means that you will have a web server running on Node and Express. You most likely also use a NodeJS driver to talk to your database — probably MongoDB or Redis.

So here is what a typical webpack.config.js looks like:

This config assumes that you have use some node modules and dist version of few libraries saved inside a public/libs folder. Now if you’ve read other tutorials, you understand what the configs in this file do, however I’m still gonna briefly explain what few things in this file are for —


var React = require(‘react’);
var ReactDom = require('reactDom');
var $ = require('jquery');
//Your application logic

Or if you prefer AMD over CommonJS:

define(
[
‘react’,
’reactDom’,
’jquery’
],
function(React, ReactDom, $) {
//Your application logic
}
);

Or in ES6 too:

import React from 'react';
import ReactDom from 'reactDom';
import $ from 'jquery';
entry: {}

This block in your config allows Webpack to determine where your app begins execution, and it creates chunks out of it. Having multiple entry points in your application is always advantageous. In particular, you can add all your vendor files — like jQuery and ReactJS — into one chunk. This way, your vendor files will remain the same, even when you modify your source files.

So in the above config, there are two entry points. One for your app’s entry where your JS begins, and one for your vendors — each of them mapped to a variable name.

output: {
path: path.join(__dirname, “public”),
filename: “dist/js/[name].bundle.js”
},

This block tells Webpack what to name your files after the build process, and where to place them. In our example we have two entries named app and vendors, so after the build process you’ll have two files called app.bundle.js and vendors.bundle.js inside /public/dist/js directory.

Webpack comes with a rich ecosystem of plugins to help meet specific needs. I’ll briefly explain few of the most commonly used ones:

By including noParse, you can tell Webpack not to parse certain modules. This is useful when you only have the dist version of these modules/libraries. Improves build time.

Image for post
Image for post

Now if you write JSX in your React code, you can either use the jsx-loader or babel-loader to pre-compile JSX into JavaScript. So you can run npm install jsx-loader and include this in your config:

loaders: [
{
test: /\.js$/,
loader: 'jsx-loader'
},
]

However, if you write your code in JSX and ES6, then you’ll need to use the babel-loader, along with the babel plugin for React. So run npm install babel-core babel-loader babel-preset-es2015 babel-preset-react and then add this to your config instead of the above.

loaders: [
{
test: /\.js$/,
loader: ‘babel’,
query: {
presets: [‘react’, ‘es2015’]
},
include: path.join(__dirname, ‘public’)
}
]

Likewise, you have loaders to compile TypeScript, CoffeeScript, etc.

Example

Opening your terminal, going to your project’s root folder and running webpack will create two files: vendors.bundle.js and app.bundle.js. Include these two files in your index.html and hit http://localhost:8000 in your browser. This will render a component with your username displayed on the web page.

Now, as you work more on Webpack, you’ll get frustrated by constantly having to build your files manually to see changes reflected on your browser. Wouldn’t it be awesome if there was a way to automate the build process every time you make a change to a file? So if you’re tired of typing the command webpack and hitting the refresh button on your browser every time you change a class name, do read on…

Automating Builds with Webpack Dev Server and React Hot Loader

Image for post
Image for post

We will use this awesome module called Webpack Dev Server. It’s an express server which runs on port 8080 and emits information about the compilation state to the client via a socket connection. We will also use React Hot Loader which is plugin for Webpack that allows instantaneous live refresh without losing state while editing React components.

Then you need to tweak your Webpack config a little to use this plugin. In your loaders, add this before any other loader:

{ 
test: /\.jsx?$/,
loaders: [‘react-hot’],
include: path.join(__dirname, ‘public’)
}

This tells Webpack to use React Hot Loader for your components. Make sure React Hot Loader comes before Babel in the loaders array. Also make sure you have include: path.join(__dirname, ‘public’) to avoid processing node_modules, or you may get an error like this:

Uncaught TypeError: Cannot read property ‘NODE_ENV’ of undefined

If your index.html has something like this:

<script src="/dist/js/vendors.js"></script>
<script src="/dist/js/app.bundle.js"></script>

Change this to point to your webpack-dev-server proxy:

<script src="http://localhost:8080/dist/js/vendors.js"></script>
<script src="http://localhost:8080/dist/js/app.bundle.js"></script>

wait for the bundling to finish, then hit http://localhost:8000 (your express server port) in your browser.

If you run into any errors while setting up React Hot Loader, you’ll find this troubleshooting guide and this awesome answer on Stack Overflow on Managing jQuery Plugin Dependency with Webpack very helpful. In addition, you can take a look at the Webpack setup for my projects here and here.

This is only meant for development. While in production, you need to minify all your files. Just running webpack -p will minify/uglify/concatenate all your files.

Wouldn’t it be awesome if there was a way to view all your file dependencies in a beautiful tree-like visualization? There is a web-app which does that.

In your terminal, run webpack — profile — json > stats.json. This will generate a JSON file called stats.json. Go to http://webpack.github.io/analyse/ and upload the file, and you’ll see all dependencies in a tree like structure.

Image for post
Image for post

Liked what you read? You should subscribe. I won’t waste your time.

freeCodeCamp.org

This is no longer updated.

Ashwin Hariharan

Written by

Software Engineer & Fitness Freak, among other things! ❤ Writing | Startups, Tech, AI, ML | Teacher on occasions, student for life. blog.booleanhunter.com

freeCodeCamp.org

This is no longer updated. Go to https://freecodecamp.org/news instead

Ashwin Hariharan

Written by

Software Engineer & Fitness Freak, among other things! ❤ Writing | Startups, Tech, AI, ML | Teacher on occasions, student for life. blog.booleanhunter.com

freeCodeCamp.org

This is no longer updated. Go to https://freecodecamp.org/news instead

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store