Webpack and Docker for Development and Deployment

Andyccs
5 min readJan 2, 2016

Updated on July 6, 2017: Thank you for all your interests in this story. When I wrote this article, I didn’t thought that it will help many to solve their problems. Please take note that Webpack and Docker have since developed to newer version, and codes and samples in this article might not work well. However, I hope this article can still help you to learn something new. =)

Webpack and Docker are great for both development and deployment processes.

When using Webpack for development, you get great dev tool support (read: webpack-dev-server and hot reloading) and can use any existing Javascript library without any efforts. Webpack can even replace Browserify. When using Webpack for deployment, Webpack helps you to bundle your modules (e.g. CSS, JSX, JS, etc. ).

When using Docker for development, as pointed out by Mark Wolfe, you get

  1. Portable build environment
  2. Simplified on-boarding of new developers
  3. Consistency between development and continuous integration (CI)

Here is another article that talks about React and Flux: A Docker Development Workflow by Aaron Tribou. When using Docker for deployment, you can ship your codes easily.

Context

When doing my side project, I was trying to put Webpack and Docker together so that I can enjoy those advantages. I found out that the process is awful; all pieces are shattered everywhere in the Internet. That’s why I am writing this article.

We will start by looking at a small and simple React application, evolve the codes to use both Webpack and React, and along the way, look at the problems and their solutions.

All the code can be found in this Github repository. You can code along with me, or browse through tags in this repository. I will give you tags along the way.

Let’s Start Coding

First, we follow tutorial by Blake Williams to set up a small react application with Webpack.

// webpack.config.js (tag: v1)
...
module.exports = {
context: contextPath,
entry: {
javascript: ‘./index.js’,
html: ‘./index.html’
},
output: {
path: buildPath,
filename: ‘bundle.js’,
},
...
}

We can then run our webpack-dev-server:

$ webpack-dev-server --hot --inline

--

--