jmfirth/webpack

jmfirth/docker-webpack

基于Webpack的容器化开发与构建工具链

轻松使用https://github.com/webpack/webpack和https://github.com/webpack/webpack-dev-server来开发和构建JavaScript应用！无需安装本地环境，即可获得现代https://github.com/nodejs/node和Web应用开发的所有功能。

可用镜像

该镜像以Docker Hub上的https://hub.docker.com/_/node/为基础，遵循其标签约定。以下是当前可用的标签列表：

安装镜像

安装最新版本：

sh
$ docker pull jmfirth/webpack

运行镜像

该镜像预安装了webpack和webpack-dev-server，可在交互式Docker shell中使用。任何有效的webpack和webpack-dev-server命令均可运行。

示例：安装Npm依赖

安装项目Npm依赖的示例。

注意：假设project.json存在于源码根目录。
注意：如果您偏好，也可以全局使用Yarn！

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

示例：监听与服务

使用webpack-dev-server监听并服务应用的示例。

注意：假设默认的webpack.config.js存在于源码根目录。

sh
$ 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

示例：构建

使用webpack构建应用的示例。

注意：假设默认的webpack.config.js存在于源码根目录。

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

完整示例

创建Docker机器：

sh
# 创建名为"site"的Docker机器
$ docker-machine create site --driver=virtualbox

# 获取新虚拟机的环境变量
$ eval "$(docker-machine env site)"

获取并准备源码：

sh
# 获取使用Webpack的源码
$ git clone https://github.com/petehunt/react-webpack-template.git src
$ cd src

# 安装Npm依赖
$ docker run \
  --rm \
  -i \
  -t \
  -v /path/to/src:/app \
  jmfirth/webpack \
  npm install --no-bin-links

修改webpack.config.js文件以通过轮询监听：

watchOptions: {
   poll: true
}

服务应用：

sh
# 通过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