Laya结合webpack实时动态编译

最新推荐文章于 2022-12-18 12:48:32 发布

原创

最新推荐文章于 2022-12-18 12:48:32 发布 · 3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #javascript #typescript #3d #vscode

本文档详细介绍了如何在Laya2.12.2版本中结合Webpack实现项目的实时动态编译，包括在VSCode中配置文件监控、设置断点，并通过Chrome调试面板进行源码级调试。步骤包括安装Webpack、配置Package.json、tsconfig.json和webpack.config.debug.js，以及安装依赖包和启动编译。最后，文章提供了具体的命令行操作指导。

Laya结合webpack实时动态编译

简述
安装 Webpack
放入配置
安装依赖包
运行

简述

本方案在Laya 2.12.2 测试通过。
可以在 vscode 里实时监控文件变化，自动进行编译成 bundle.js。
然后通过 chrome 的调试面板可以直接断点 ts 文件。

安装 Webpack

1.确认已安装 nodejs
2.管理员身份打开 window powershell
3.输入 npm install -g webpack （或者通过下面的 npm install 安装依赖包也可以，这一步可以跳过）

放入配置

1.在 vscode 项目根目录下，创建 Package.json，里面输入

{
   
   
  "scripts": {
   
   
    "bundle:dev": "webpack --config webpack.config.debug.js --watch",
    "test": "jest",
    "test-c": "jest --coverage"
  },
  "jest": {
   
   
    "testEnvironment": "node"
  },
  "devDependencies": {
   
   
    "@types/jest": "^26.0.20",
    "flatbuffers": "^1.12.0",
    "jest": "^26.6.3",
    "protobufjs": "^6.10.1",