在使用 AngularJS 和 Webpack 构建应用程序时，经常遇到一个问题：代码压缩后，AngularJS 的依赖注入会失效。为了解决这个问题，我们可以使用 ng-annotate-webpack-plugin 这个 npm 包来自动注入依赖。
安装
使用 npm 安装 ng-annotate-webpack-plugin：
npm install ng-annotate-webpack-plugin --save-dev
使用
在 webpack 配置文件中，引入 ng-annotate-webpack-plugin：
const NgAnnotatePlugin = require('ng-annotate-webpack-plugin');然后在 plugins 数组中实例化：
plugins: [
new NgAnnotatePlugin({
add: true,
}),
],其中 add 参数表示是否添加注释。
注意
在使用 ng-annotate-webpack-plugin 时，需要在代码中使用特定的注释格式。如果代码中使用了函数参数的默认值或对象属性的简写形式，需要使用 /*@ngInject*/ 注释来显式声明依赖。
例如：
-- -------------------- ---- -------
--------------------------
--------------------------- ---------------- ------ -
-------------
-------- ------ -
-----------------
-------------------------
----------- - --------------
---
-
-------
---示例代码
-- -------------------- ---- -------
----- ------- - -------------------
----- ---------------- - --------------------------------------
-------------- - -
-- ----
------ -----------------
-- ----
------- -
--------- ----------------
----- --------- - --------
--
-- -----
------- -
------ -
-
----- --------
-------- ---------------
------- ---------------
--
--
--
-- --
-------- -
--- ----------------------------------
--- ------------------
---- -----
---
--
--结论
ng-annotate-webpack-plugin 可以自动注入 AngularJS 依赖，在代码压缩时避免依赖注入失效的问题。使用 ng-annotate-webpack-plugin 可以提高应用程序的可维护性和稳定性，值得使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65365
