企业官网建设流程全解析

Three.js-TypeScript-Boilerplate的Webpack三段式配置深度拆解：从开发热更新到生产级bundle

【免费下载链接】Three.js-TypeScript-BoilerplateThree.js TypeScript Boilerplate项目地址: https://gitcode.com/gh_mirrors/th/Three.js-TypeScript-Boilerplate

Three.js-TypeScript-Boilerplate 是一个开箱即用的 Three.js + TypeScript 三维开发模板，内置完整的 Webpack 三段式构建配置：开发模式支持热更新（HMR）秒级刷新，生产模式自动压缩打包出极致的 bundle.js。本文将带你用 5 分钟读懂它的三份 webpack 配置文件，掌握从npm run dev到生产部署的完整链路，帮你少走弯路。

一图看懂：Webpack三段式配置文件结构

项目将 Webpack 配置拆成3 个文件，全部位于src/client/目录，各司其职：

dev 和 prod 两个文件都通过webpack-merge的merge()把 common 配置"叠"进来，避免重复书写。这种"公共 + 环境差异"的拆分是业界标准的 Webpack 配置模式，值得直接抄进你自己的项目。（提示：若本地缺少 webpack-merge，执行npm install -D webpack-merge即可。）

公共配置 webpack.common.js：TypeScript 如何被编译进 bundle

整个模板的构建基石就这 4 个关键点（见 webpack.common.js#L3-L21）：

1. 入口 entry：指向 client.ts —— 一个创建绿色线框立方体、带 OrbitControls 交互的标准 Three.js 场景；
2. loader 规则：所有.ts/.tsx文件交给ts-loader编译，并排除node_modules提升构建速度；TypeScript 的严格模式在 tsconfig.json 中开启；
3. resolve 扩展名：.tsx、.ts、.js均可省略后缀导入；
4. output 输出：统一产出dist/client/bundle.js，开发与生产共用同一产物路径。

💡 这套配置让 Three.js 的 addon 模块（如three/addons/controls/OrbitControls.js）能通过moduleResolution: "bundler"直接 import，无需手动拷贝任何 JS 库。

开发配置 webpack.dev.js：热更新最快开启方式

webpack.dev.js#L5-L13 只有几行，却决定了开发体验的流畅度：

• mode: 'development'：关闭压缩、保留可读代码与详细错误信息；
• devtool: 'eval-source-map'：生成速度最快的 source map 类型，断点调试体验接近源码；
• devServer：静态目录指向dist/client，hot: true开启热模块替换。

运行npm run dev（等价于webpack serve --config ./src/client/webpack.dev.js，见 package.json#L7），访问http://127.0.0.1:8080，修改 client.ts 中的立方体颜色或旋转速度，页面无需刷新即刻生效——这就是 Three.js 三维开发最爽的地方：所见即所得。

生产配置 webpack.prod.js：生成轻量级 bundle

webpack.prod.js#L4-L9 做了两件事：

• mode: 'production'：自动启用 Tree Shaking、代码压缩（Terser）、模块作用域提升，把 bundle 体积压到最小，适合真实上线；
• performance: { hints: false }：关闭体积告警。Three.js 本身体积较大，保留告警只会刷屏干扰，关闭后更清爽。

运行npm run build（见 package.json#L6）即可得到压缩版dist/client/bundle.js。

从构建到部署：Express 托管生产 bundle

生产环境不再需要 webpack-dev-server，模板用 Node.js + Express 接管静态服务。server.ts 中已写好完整部署流程注释：

npm run build # 用 webpack.prod.js 生成生产 bundle 到 dist/client tsc -p ./src/server # 将 server.ts 编译为 dist/server/server.js npm start # 启动 Express，访问 http://127.0.0.1:3000

Express 通过express.static托管dist/client目录（见 server.ts#L14），浏览器加载到的正是刚才那个被压缩优化的 bundle.js，完成从"开发热更新"到"生产级 bundle"的闭环。

这套 Webpack 配置还能撑起多大的项目？

得益于稳定的构建底座，模板提供了十几个进阶分支：Socket.IO 多人同步、Cannon.js 物理引擎、WebXR 虚拟现实、BSC5 恒星目录等，均复用同一套三段式 Webpack 配置，零改动直接构建。

总结：新手必记的 3 个要点 ✅

1. 三段式拆分：common 管入口与 TS 编译，dev/prod 只管环境差异，用 webpack-merge 合并，配置不重复、扩展不冲突；
2. 开发用npm run dev：eval-source-map + HMR，改代码秒级热更新，8080 端口看效果；
3. 上线用npm run build+npm start：production 模式压出最小 bundle，Express 托管 3000 端口出生产环境。

clone 仓库git clone https://gitcode.com/gh_mirrors/th/Three.js-TypeScript-Boilerplate并npm install后，照着 README.md 跑一遍，你就能拥有一套可长期维护的 Three.js + TypeScript 工程化底座。

【免费下载链接】Three.js-TypeScript-BoilerplateThree.js TypeScript Boilerplate项目地址: https://gitcode.com/gh_mirrors/th/Three.js-TypeScript-Boilerplate