在前端开发中，使用Webpack打包工具已经变得越来越普遍。而在Angular项目中，Angular-CLI提供了非常方便的打包工具，但是有时我们可能需要更加细致地控制Webpack的配置。这时，我们可以使用npm包angular-webpack-plugin来定制我们的Webpack配置，这篇文章将介绍如何使用它。
安装
要使用该npm包，我们需要在我们的Angular项目中安装它：
--- ------- ---------- ----------------------
配置
安装完之后，我们需要修改我们的Angular-CLI默认的Webpack配置。在项目的根目录下，找到webpack.config.js文件或webpack.config.ts文件（如果有的话），并添加以下代码：
----- -------------------- - ----------------------------------
-------------- - -
-- ---
-------- -
--- ----------------------
-
--如此一来，我们就可以在默认的Webpack配置上，使用来自angular-webpack-plugin的部分工具。
AOT与JIT
在Angular中，我们可以选择使用AOT（Ahead-of-Time，预编译）或JIT（Just-In-Time，即时编译）模式。在AOT模式下，Angular编译器会在编译阶段把模板代码编译成原生的JavaScript，以提高代码的性能。而在JIT模式下，Angular会在浏览器中动态地编译模板代码。下面我们将看到如何在angular-webpack-plugin中配置AOT和JIT模式。
AOT模式
要在angular-webpack-plugin中使用AOT模式，我们需要先把Angular项目中的main.ts文件改为main-aot.ts文件，并修改文件中的引用，使得它引用AOT模块。
然后，在我们的Webpack配置中，我们要添加以下代码：
----- -------------------- - ----------------------------------
----- -------------- - ----------------------------
-------------- - -
-- ---
-------- -
--- -----------------------
--- --------------------------------------
------------ -------------------------------
------------- -----------------
--
-
--这段代码使用了@ngtools/webpack中的AngularCompilerPlugin，并定义了入口模块和TypeScript的配置文件路径。此时，在编译项目时，会先执行AOT编译，生成优化后的JavaScript代码，然后再使用Webpack打包。
JIT模式
要在angular-webpack-plugin中使用JIT模式，我们需要在Webpack配置中添加以下代码：
----- -------------------- - ----------------------------------
----- - ------------------ - - ---------------------------------------------
-------------- - -
-- ---
-------- -
--- ----------------------
------ -----
----------- -
-- ------------------------
-- -----------------------------------------------------------------------
-
--
--
------- -
------ -
-- ---
-
----- --------
---- -
-
------- -------------------------------------------------
-------- -
---------- -----
-
--
-
------- ------------
-------- -
-- -----------------------
-- --------------------------
-- --------------------------
-
-
-
-
-
--
------------- -
--------- -----
--
-- ---
--这里我们使用了@angular/platform-browser-dynamic中的JitCompilerFactory，并通过配置AngularWebpackPlugin的doJit为true，启用JIT模式。我们还可以通过配置jitOptions，来传递额外的编译选项。最后，在Webpack的规则中，我们使用了ts-loader，并为它配置了自己的tsconfig.json路径。
总结
通过学习本文，我们了解了如何使用npm包angular-webpack-plugin来定制我们的Webpack配置，以及如何在其中使用AOT和JIT模式。当我们需要更加细致地控制Webpack的配置时，这个工具就非常有用了。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/185289