基于webpack3的静态应用生产部署：webpack-dev-server该如何处理？

嘿，这个问题其实很清晰——webpack-dev-server从设计之初就是纯开发环境工具，生产环境完全用不上它，所以根本不需要“替换”，只要调整依赖配置并做好生产构建就行，具体来说：

webpack-dev-server的作用是给开发阶段提供热重载、本地预览的临时服务器，它不会帮你生成可部署的静态文件，生产环境完全不需要运行它，也不需要把它作为生产依赖安装。

具体操作步骤 #

• 调整依赖归属
  如果你之前把webpack-dev-server装在了dependencies（生产依赖）里，先把它移到devDependencies（开发依赖）中，这样生产环境部署时不会自动安装它。执行命令：

  npm uninstall --save webpack-dev-server
  npm install --save-dev webpack-dev-server
  

  或者直接手动修改package.json，把它从dependencies区块挪到devDependencies数组里也可以。

• 配置webpack生产构建流程
  webpack3没有webpack4的mode快捷选项，所以你需要手动配置生产环境的优化规则：

  • 用webpack.DefinePlugin把process.env.NODE_ENV设为'production'，这样Material Design Components等第三方依赖会自动启用生产模式的优化逻辑；
  • 启用代码压缩（比如配置UglifyJsPlugin）；
  • 开启Tree Shaking（确保你的代码使用ES6 import/export语法，并在webpack配置中启用相关优化）；
  • 指定明确的输出目录（比如dist），确保所有打包后的JS、CSS、图片等静态资源都集中在这里。

• 执行构建并部署静态文件
  在package.json的scripts里添加生产构建命令：

  "scripts": {
    "start": "webpack-dev-server --config webpack.dev.config.js", // 开发环境启动用
    "build": "webpack --config webpack.prod.config.js" // 生产构建用
  }
  

  运行npm run build后，你的输出目录（比如dist）会生成一套优化后的静态文件。部署时，只需要把这个目录里的所有内容上传到静态托管服务（比如Google Cloud Storage、Nginx、Netlify等）就行——这时候完全不需要webpack-dev-server，服务器只需要托管静态文件即可，不用运行任何webpack相关服务。

总结 #

不需要卸载webpack-dev-server（毕竟开发阶段还要用它做本地预览），只要把它归为开发依赖，生产环境只部署webpack构建好的静态产物就足够了，这个工具在生产环境没有存在的必要。

内容的提问来源于stack exchange，提问作者chimos