jmfirth/docker-webpack

Webpack-based development and build toolchain in a container

Develop and build JavaScript applications using webpack and webpack-dev-server with ease! Get all the bells and whistles of modern Node.js and/or web application development without the hassle of installing an environment.

Available Images

This image uses the official Node.js image on the Docker Hub as it's base, following their tag convention. Below is a list of currently available tags:

Installing the Image

Install latest:

$ docker pull jmfirth/webpack

Running the Image

The image preinstalls webpack and webpack-dev-server for use in the interactive docker shell. Any valid webpack and webpack-dev-server command can be run.

Example: Install Npm Dependencies

An example of installing project npm dependencies.

Note: Assumes that project.json exists at source root. Note: Yarn is also available globally if you prefer!

$ docker run \
  --rm \
  -i \
  -t \
  -v /path/to/source:/app \
  jmfirth/webpack \
  npm install --no-bin-links

Example: Watch and Serve

An example of watching and serving the app using webpack-dev-server.

Note: Assumes that default webpack.config.js exists at source root.

$ docker run \
  --rm \
  -i \
  -t \
  -v /path/to/source:/app \
  -p 3000:8080 \
  jmfirth/webpack \
  webpack-dev-server --hot --inline --progress --host 0.0.0.0

Example: Build

An example of building the app with webpack.

Note: Assumes that default webpack.config.js exists at source root.

$ docker run \
  --rm \
  -i \
  -t \
  -v /path/to/source:/app \
  jmfirth/webpack \
  webpack

Full Example

Create a docker machine:

# create a docker machine called "site"
$ docker-machine create site --driver=virtualbox

# get environment variables to new vm
$ eval "$(docker-machine env site)"

Obtain and prepare source:

# get some source that uses webpack
$ git clone https://github.com/petehunt/react-webpack-template.git src
$ cd src

# install npm dependencies
$ docker run \
  --rm \
  -i \
  -t \
  -v /path/to/src:/app \
  jmfirth/webpack \
  npm install --no-bin-links

Modify the webpack.config.js file to watch by polling:

watchOptions: {
   poll: true
}

Serve the app:

# serve app through webpack-dev-server
$ docker run \
  --rm \
  -i \
  -t \
  -v /path/to/src:/app \
  -p 3000:8080 \
  jmfirth/webpack \
  webpack-dev-server --hot --inline --progress --host 0.0.0.0