如何配置Node.js项目构建脚本用于Azure部署？webpack报错如何解决

你遇到的'webpack' is not recognized错误，本质是执行npm脚本时未找到项目本地安装的webpack可执行文件，按以下步骤配置即可解决：

• 首先将webpack相关依赖安装到项目开发依赖中，不要仅依赖全局安装的webpack（云部署环境默认不会安装全局npm包），执行命令：
  npm install webpack webpack-cli --save-dev
• 完成安装后，scripts字段的build脚本有三种兼容写法，任意选一种即可：
  • 最简写法："build": "webpack"，npm执行脚本时会自动检索node_modules/.bin目录下的可执行文件，只要项目本地已安装webpack即可正常运行
  • 显式路径写法："build": "node_modules/.bin/webpack"，手动指定webpack路径，兼容不同操作系统的环境变量配置
  • npx调用写法："build": "npx webpack"，npx会优先读取项目本地的webpack可执行文件，适配性更强

生产环境打包建议追加mode参数，写法为"build": "webpack --mode production"，可自动开启代码压缩、tree shaking等优化逻辑，减小构建产物体积。

除了webpack之外，还有多种构建方案可适配Azure及其他云服务的部署要求，可根据项目类型选择：

• 前端类项目（React/Vue/原生前端）可选用Vite替代Webpack，构建速度提升数倍，配置更简洁，仅需安装vite到开发依赖后，将build脚本写为"build": "vite build"即可，云服务对Vite构建产物的适配度和Webpack完全一致
• 组件库、NPM包类项目可选用Rollup，构建产物更精简，tree shaking能力更强，build脚本写为"build": "rollup -c rollup.config.js"
• 大型项目可选用ESBuild，性能是Webpack的10~100倍，无需复杂配置即可快速完成打包，Node.js服务类项目的build脚本示例："build": "esbuild src/index.js --bundle --outfile=dist/index.js --platform=node"
• TypeScript项目可直接用官方tsc编译，无需额外打包工具，build脚本写为"build": "tsc"，编译后的JS文件可直接部署运行
• 纯Node.js后端服务如果没有静态资源需要打包、也没有高级语法转译需求，可以完全跳过构建步骤，直接部署源码，在云服务的启动配置里指定启动命令为node 入口文件.js即可

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