如何使用 Webpack 改进编译速度

背景

白鹭已经在5.3.6版本中加入了对Webpack的支持，通过webpack，开发者可以大幅改善项目的增量编译效率，并可以充分使用npm上丰富的JavaScript第三方库。

白鹭引擎团队将webpack封装为了两个白鹭引擎的构建管线插件，分别称为WebpackDevServerPlugin和WebpackBundlerPlugin。所有白鹭项目均可以使用这两个插件。

这两个插件在执行构建时，包含了一个typescript.mode的字段，可以设置为legacy或modern，这分别对应着两种不同的编译模式，前者更适用于兼容现有老项目，后者更适用于新项目。以下表格为这两种模式以及传统模式这三者的对比。

legacy模式步骤

步骤一：替换现有的编译命令

使用白鹭引擎5.3.7版本创建一个新项目，然后将scripts/plugins文件夹拷贝至现有项目同级目录下。

将scripts/config.ts中的IncrementBuildPlugin和CompilePlugin替换为WebpackDevServerPlugin和WebpackBundlerPlugin。

步骤二：设置编译参数

WebpackDevServerPlugin和WebpackBundlerPlugin内部实现均是调用了 @egret/egret-webpack-bunlder 中的相关方法，调用这些方法需要传递参数，通常按照默认值设置即可，主要需要注意的参数是typescript.mode，如果是现有项目请确认设置为legacy。

步骤三：执行构建

修改完上述代码后，执行egretbuild即可。编译后可能会报错，这是因为白鹭引擎之前的TypeScript编译器是2.4版本，而最新则采用3.9版本，新版本编译器会进行更严格的类型检查。修复这些错误后即可顺利运行您的项目。

modern模式步骤

除了legacy模式以外，我们还提供了modern模式。如上文所述，这种模式下编译速度更快，但是需要进行较复杂的转换，白鹭引擎在后续版本的创建新项目时默认模板将改为modern模式。

如果您想将现有项目转换为modern模式，请按照如下步骤：

步骤一：执行转换脚本，生成一个新的TypeScript项目

首先安装转换脚本。

npminstall@egret/convert-egret-project-to-es6-g

convert-egret脚本内部会执行如下操作：1.根据项目的tsconfig.json文件，获取所有.ts和.dts文件2.将libs文件夹拷贝至新的路径3.遍历每个ts文件，为所有的类、全局函数和全局变量添加export关键字4.再次遍历每个ts文件，为所有类添加对应的import语句5.将这些ts文件重新生成至新路径。

步骤二：执行TypeScript编译检查

执行如下脚本。

上述脚本的作用是调用typescript编译检查（不生成js文件），理论上执行完此代码后，不应该有任何报错，但是由于如下几个原因，可能会导致报错：1.白鹭引擎之前的TypeScript编译器是2.4版本，而最新则采用3.9版本，新版本编译器会进行更严格的类型检查2.添加完export/import后可能有一些语法错误。

cd

tsc--noEmit

步骤三：将这个新项目中的TypeScript代码替换到现有项目中

这一步需要将现有项目的src代码全部删除，然后将新项目的代码拷贝进来，强烈建议做好备份。

步骤四：在现有项目中添加WebpackBundlerPlugin

您可以使用引擎5.3.6创建一个新项目，然后将scripts/plugins文件夹拷贝至现有项目同目录，然后在config.ts中添加newWebpackDevServerPlugin()，代替掉IncrementBuildPlugin()。添加该插件后，执行egretbuild命令，WebpackBundlerPlugin会自动进行webpack构建、启动服务器、打开浏览器相关功能，可以代替egretrun命令。

步骤五：修复因循环依赖而产生的诸多问题

这一过程比较复杂，构建成功后，打开浏览器控制台，您很大概率会发现项目无法运行并存在一些报错，通过堆栈可以判断其大意是某个类继承了一个undefined的类。这种问题是循环依赖导致的，具体原因如下：

//index.ts

import{MyComponent}from"./component";

import{MyComponent2}from"./component2";

exportclassMyApp{

constructor(){

constmyComponent=newMyComponent(this);

constmyComponent2=newMyComponent2();

}

}

exportclassBaseObject{

}

//component.ts

import{MyApp}from".";

exportclassMyComponent{

constructor(app:MyApp){

}

}

//component2.ts

import{BaseObject}from".";

exportclassMyComponent2extendsBaseObject{

constructor(){

super();

}

上述代码中，只要在MyApp中引用MyComponent不会报错，但是如果引用了MyComponent2，就会报错。这是因为index.ts中的importfrom'./MyComponent2'中执行时，classBaseObject还没有生成，而MyComponent2继承了BaseObject，就会出现这个问题。

上述问题解决后，您就可以使用modern模式进行项目开发了。

其他

使用npm脚本代替白鹭构建管线

除了通过egretbuild命令运行，egret-webpack-bunlder也可以直接使用npm脚本执行，不采用白鹭的构建管线，具体方式如下：

1、使用标准npm方式添加webpack/webpack-devserver等脚本，不再赘述；

2、安装@egret/egret-webpack-bundler，版本号1.1.5以上；

//@ts-check

constpath=require('path');

constbundler=require('@egret/egret-webpack-bundler');

constconfig=bundler.generateConfig(__dirname,{

libraryType:'debug'

},'web',false)

module.exports=config;

升级egret-webpack-bundler版本

我们已将egret-webpack-bunlder托管到npm上，如果您需要更新最新版本，可以在scripts/plugins文件夹下执行以下脚本：

npm install @egret/egret-webpack-bundler@next --save --registry https://registry.npm.taobao.org