在前端开发中，使用Webpack打包工具已经变得越来越普遍。而在Angular项目中，Angular-CLI提供了非常方便的打包工具，但是有时我们可能需要更加细致地控制Webpack的配置。这时，我们可以使用npm包angular-webpack-plugin来定制我们的Webpack配置，这篇文章将介绍如何使用它。
安装
要使用该npm包，我们需要在我们的Angular项目中安装它：
npm install --save-dev angular-webpack-plugin
配置
安装完之后，我们需要修改我们的Angular-CLI默认的Webpack配置。在项目的根目录下，找到webpack.config.js文件或webpack.config.ts文件（如果有的话），并添加以下代码：
const AngularWebpackPlugin = require('angular-webpack-plugin'); module.exports = { // ... plugins: [ new AngularWebpackPlugin() ] };
如此一来，我们就可以在默认的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
