介绍
kee-ng2-webpack 是一个适用于 Angular 2 的模块化、可插拔性强的 webpack 配置工具。它为开发者提供了一系列的扩展点，可以快速搭建出符合自己需求的 webpack 配置。同时，它还整合了一些常用的 loader 和插件，帮助开发者快速构建和打包应用。
安装和使用
使用 kee-ng2-webpack 非常简单。首先使用命令行工具进入项目目录，执行以下命令：
npm install kee-ng2-webpack --save-dev
该命令将自动安装 kee-ng2-webpack 并且将它添加到项目的 package.json 文件中。
接下来，你需要在项目的根目录下创建一个 webpack.config.js 的文件，并在该文件中使用 kee-ng2-webpack 暴露出的默认配置：
const { KeeNg2WebpackConfig } = require('kee-ng2-webpack');
module.exports = new KeeNg2WebpackConfig();最后，在命令行中执行 webpack 命令即可编译你的项目。
模块介绍
kee-ng2-webpack 内置了一些常用的 loader 和插件，在项目中可以轻松使用这些模块。
loaders
ts-loader
ts-loader 是一个支持 TypeScript 的 webpack loader。它能够将 TypeScript 文件转换成 JavaScript 文件，使得浏览器能够正确地解析 TypeScript 代码。
在 kee-ng2-webpack 中，ts-loader 已经包含在默认配置中。
css-loader
css-loader 支持将 CSS 文件打包进 JavaScript 文件中。这样做的好处，一方面能够减少 HTTP 请求次数，提高页面加载速度；另一方面，也能够更好地管理 CSS 和 JavaScript 之间的依赖关系。
在 kee-ng2-webpack 中，css-loader 已经包含在默认配置中。
file-loader
file-loader 能够将图片、字体等静态资源打包成文件并导出路径。在项目中，我们只需要使用文件名引用这些静态资源，而不需要像以前一样手动写一大堆的相对路径。
在 kee-ng2-webpack 中，file-loader 已经包含在默认配置中。
plugins
HtmlWebpackPlugin
HtmlWebpackPlugin 可以自动将打包后的 JavaScript 和 CSS 文件注入到 HTML 文件中，并生成一个新的 HTML 文件。这样做的好处，一方面能够更好地管理 JavaScript 和 CSS 文件之间的依赖关系；另一方面，也能够在打包时自动生成 HTML 文件，省去手动复制、修改等繁琐步骤。
在 kee-ng2-webpack 中，默认配置已经包含了 HtmlWebpackPlugin。
配置文件
kee-ng2-webpack 的配置文件非常简单，只需要一句话即可完成整个配置。默认配置已经包含了一些常用的 loader 和插件，可以满足大部分的开发需求。
自定义配置
如果需要根据自己的需求进行一些特殊的配置，可以通过传递一个配置对象来进行自定义配置。以下是一个自定义 kee-ng2-webpack 配置的例子：
-- -------------------- ---- -------
----- - ------------------- - - ---------------------------
----- ------ - --- ---------------------
------ -----------------
------- -
----- ---------
--------- -----------
-
---
-------------- - -------在上面的例子中，我们自定义了项目的入口文件和输出文件的位置。
扩展配置
除了自定义配置之外，kee-ng2-webpack 还支持扩展配置。可以通过继承 KeeNg2WebpackConfig 配置类来进行扩展配置。以下是一个扩展 kee-ng2-webpack 配置的例子：
-- -------------------- ---- -------
----- - ------------------- - - ---------------------------
----- --------------- ------- ------------------- -
------------- -
-------
------ -----------------
------- -
----- ---------
--------- -----------
-
---
-
--------- -
--- ------- - ----------------
---------------- -------------------
------ --------
-
-
-------------- - --- ------------------在上面的例子中，我们扩展了 plugins 方法，添加了一个自定义的插件 MyWebpackPlugin。
示例代码
下面是一个使用 kee-ng2-webpack 的示例代码：
-- -------------------- ---- ------- -- ---------------- ------ - --------- - ---- ---------------- ------------ --------- ----------- ------------ ----------------------- ---------- ----------------------- -- ------ ----- ------------ - ----- - ------ - -- ------------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------ - ---- ------------------ ----------- ------------- --------------- -------- ---------------- ---------- -------------- -- ------ ----- --------- -- -- ------- ------ - ---------------------- - ---- ------------------------------------ ------ - --------- - ---- --------------- ----------------------------------------------------
总结
kee-ng2-webpack 是一个非常实用、强大的 webpack 配置工具。它提供了一系列的扩展点，可以快速搭建出符合自己需求的 webpack 配置。同时，它还整合了一些常用的 loader 和插件，帮助开发者快速构建和打包应用。希望本文能够为大家提供一些有用的帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005546b81e8991b448d1b31