用Docker部署webpack项目：从零开始的完整实操

如果你想让webpack开发环境在不同机器上保持一致，或者想快速迁移项目到服务器，用Docker部署webpack是最省心的方案。
本文按零基础可执行的顺序，带你把一个webpack项目完整放入Docker容器。

先检查环境并创建项目目录

确保系统已安装Docker，终端执行docker --version，输出版本号即可。
如果没有，去官网下载安装。
创建一个空目录~/docker-webpack，后续所有文件都放在这里。

写出webpack配置和依赖

在目录下新建package.json，写入最小依赖：

{
  "name": "docker-webpack",
  "version": "1.0.0",
  "scripts": {
    "build": "webpack --mode production",
    "start": "webpack serve --mode development --host 0.0.0.0"
  },
  "devDependencies": {
    "webpack": "^5.0.0",
    "webpack-cli": "^4.0.0",
    "webpack-dev-server": "^3.0.0"
  }
}

接着创建webpack.config.js：

const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') },
};

新建src/index.js，内容随便写一行：console.log('Docker webpack works!
');。

编写Dockerfile并构建镜像

在项目根目录创建Dockerfile（无后缀名）：

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 8080
CMD ["npm", "run", "start"]

终端进入目录，执行构建命令：

docker build -t webpack-demo .

启动容器并开启热更新

运行容器，同时把本地源码目录挂载进去，让修改能实时同步：

docker run -p 8080:8080 -v $(pwd)/src:/app/src webpack-demo

Windows用户可将$(pwd)替换为%cd%或完整绝对路径。
此时webpack-dev-server应该启动，监听8080端口。

避坑要点与高频问题

• 热更新不生效：在webpack.config.js中添加watchOptions: { poll: 1000 }，或者运行容器时增加环境变量-e CHOKIDAR_USEPOLLING=true。
• 端口被占用：将-p 8080:8080改为-p 3000:8080，同时修改配置中devServer.port为8080（容器内不变）。
• npm install过慢：在Dockerfile中先只复制package.json，利用缓存减少重复下载；也可以换镜像源：RUN npm config set registry https://registry.npmmirror.com。
• 容器退出后源码未丢失：挂载的src目录在宿主机上，不会因容器删除而丢失。

验证部署是否成功

浏览器访问http://localhost:8080，如果看到webpack-dev-server默认页面（或你配置的入口HTML），说明Docker部署webpack成功。
修改src/index.js中的内容并保存，页面自动刷新，证明热更新生效。
如果要确认生产构建，临时把CMD改为npm run build，然后进入容器查看dist目录：docker exec -it <容器ID> ls /app/dist。

现在你已经掌握了用Docker部署webpack的基本流程。
遇到异常时，优先回看避坑部分，大部分问题都能在几分钟内解决。