webpack四份配置文件怎么读react-isomorphic-starterkit双端构建与nodeExternals配置完整讲解【免费下载链接】react-isomorphic-starterkitCreate an isomorphic React app in less than 5 minutes项目地址: https://gitcode.com/gh_mirrors/re/react-isomorphic-starterkit本文为新手准备以 react-isomorphic-starterkit 的 configs/ 目录为例5 分钟带你读懂 webpack 四份配置文件——双端浏览器 Node构建差异、nodeExternals到底在做什么、热更新配置又是如何继承生产配置的。一图看懂四份 webpack 配置文件各管什么 打开 configs/ 目录你会发现四份文件命名规律其实就是“端 × 模式”的二维组合配置文件构建目标模式入口产物位置webpack.client.js浏览器target: web生产src/client.jsstatic/dist/client.jswebpack.server.jsNodetarget: node生产src/server.jsdist/server.jswebpack.client-watch.js浏览器开发 热更新同上内存中dev-server :8080webpack.server-watch.jsNode开发 热更新同上dist/server.js所谓**同构isomorphic**应用就是同一套 React 组件代码在服务器和浏览器各构建一次。因此配置天然分成 “client” 和 “server” 两族再各配一份 watch 版用于开发——这就是四份文件的由来。生产客户端配置webpack.client.js 怎么读 这份配置有 4 个值得注意的点全部位于 webpack.client.jstarget: web告诉 webpack “打包给浏览器用”产物会被压缩、按浏览器方式解析路径。入口entry: [../src/client]从 src/client.js 开始收集依赖最终生成client.js供 HTML 引入。压缩优化插件UglifyJsPlugin压缩 JSDedupePlugin去重OccurenceOrderPlugin让高频模块获得更短的 ID让包体更小。环境标志注入webpack.client.jsnew webpack.DefinePlugin({__CLIENT__: true, __SERVER__: false, __PRODUCTION__: true, __DEV__: false})DefinePlugin会在编译期把这些常量“写死”进代码。业务代码就能像 src/apis/github.js 那样根据__SERVER__/__CLIENT__切换 API 地址——服务器直连真实接口浏览器走本地代理。生产服务端配置nodeExternals 是干什么的 webpack.server.js 与客户端配置长得很像但有 3 处关键差异target: node产物将在 Node 中运行不需要浏览器兼容处理devtool: source-map保留源码映射方便服务器端报错时定位原始代码externals: [nodeExternals({...})]全文最重要的一行见下。nodeExternals 为什么能省一大圈构建时间看 webpack.server.jsexternals: [nodeExternals({ whitelist: [webpack/hot/poll?1000] })],webpack-node-externals由 package.json 中的webpack-node-externals提供的作用一句话让 webpack 跳过node_modules里所有依赖不打包、不转换。对客户端来说浏览器看不懂require(koa)所以依赖必须被打包进去但对 Node 端来说运行node dist/server.js时koa、react这些包本来就在node_modules里可以被直接require——打包它们纯属浪费时间还会让构建慢好几倍。nodeExternals把这些依赖全部标记为“外部模块”webpack 只在产物中留下一句require(koa)交给 Node 在运行时自己解决。whitelist 白名单是什么细节whitelist: [webpack/hot/poll?1000]是唯一例外热更新轮询模块必须被打包进产物因为它是 webpack 内部的虚拟模块node_modules里并不存在所以特意加进白名单放行。这也是为什么生产构建虽然跳过了 node_modules热更新入口依然能正常工作。两份 watch 配置开发热更新是如何“白拿”的 两份 watch 配置的共同套路是——直接 require 生产配置然后做增量修改webpack.client-watch.js 开头就是require(./webpack.client.js)随后打开cache/debug、换成更快的cheap-module-eval-source-map再往 entry 头部塞入webpack-dev-server/client和 HMR 模块并配置 8080 端口的 dev-serverwebpack.client-watch.js。webpack.server-watch.js 同理继承服务端配置只额外插入webpack/hot/poll?1000每 1000ms 轮询一次服务器端更新并启用HotModuleReplacementPlugin。这意味着改代码后客户端页面无刷新热替换服务端 Node 进程自动重启并重新渲染开发体验是“一条命令全搞定”。四份配置里的环境开关对照表 ⚙️标志client 生产server 生产client 开发server 开发__CLIENT__✅❌✅❌__SERVER__❌✅❌✅__PRODUCTION__✅✅❌❌__DEV__❌❌✅✅业务代码用__DEV__包住开发期检查如 src/client.js 的 SSR 校验日志生产构建时这些代码会被静态标记、便于剔除。上手操作npm 脚本如何调用这四份配置 ✅package.json 的 scripts 把配置和执行对应得很整齐npm run build→ 并行执行build-serverbuild-client两份生产配置各跑一次npm run watch→ 并行拉起watch-server-start构建完成即启动服务、watch-server、watch-client三条任务对应两份watch配置。新手阅读建议3 步先读生产两份client / server抓住target、entry、output三个骨架字段再看 watch 两份如何require继承生产配置最后把DefinePlugin的四个标志和业务代码中的引用如 src/apis/github.js对号入座。小结 react-isomorphic-starterkit 用四份 webpack 配置给出了双端构建的经典答案client 配置负责浏览器压缩优化server 配置靠nodeExternals跳过 node_modules 加速构建watch 配置通过继承生产配置只叠加热更新差异。理解了这套 “端 × 模式” 的拆分思路你再打开任何同构项目的 webpack 配置都能一眼看明白每份文件在做什么。【免费下载链接】react-isomorphic-starterkitCreate an isomorphic React app in less than 5 minutes项目地址: https://gitcode.com/gh_mirrors/re/react-isomorphic-starterkit创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考