1. 简介
@angular-devkit/build-webpack 是一个 Webpack 构建工具的封装，可用于在 Angular 项目中自定义 Webpack 配置文件。它提供了一系列的构建工具，可以快速构建和优化 Angular 应用程序。
2. 安装
使用 npm 进行安装，命令如下：
npm install --save-dev @angular-devkit/build-webpack
3. 使用
3.1. 在 Angular 项目中使用 @angular-devkit/build-webpack
要在 Angular 项目中使用 @angular-devkit/build-webpack，需要创建一个 webpack 配置文件（通常命名为 webpack.config.js），并配置需要的插件和 loader。
示例配置文件：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ------- - ------------------- ----- - ------------------ - - ----------------------------------------- ----- ------- - --- ----- ------ - ---------------------------- -------------------- --- ---------------------- -------------- - --------- ----------------------------------- -- --------------- -- --- -- -------------- - -------展开代码
创建完成之后，可以使用以下命令运行构建：
ng build --config webpack.config.js
3.2. 可用的插件和 loader
@angular-devkit/build-webpack 已经预置了一系列的插件和 loader，可以用于构建和优化 Angular 应用程序。
以下是可用的插件和 loader 列表：
@angular-devkit/build-optimizer- Angular 构建优化器，可以在构建时自动执行一些优化操作。@ngtools/webpack- 将 Angular 应用程序编译为静态资源的插件。json-loader- 用于加载 JSON 文件的 loader。raw-loader- 用于加载纯文本文件的 loader。file-loader- 将文件复制到输出目录并返回 URL 的 loader。url-loader- 根据文件大小返回 dataURL 或将文件复制到输出目录并返回 URL 的 loader。style-loader- 将 CSS 插入到 HTML 页面的<style>标签中的 loader。css-loader- 处理 CSS 文件中的@import和url()引用的 loader。sass-loader- 将 SCSS 文件编译为 CSS 文件的 loader。
3.3. 配置选项
@angular-devkit/build-webpack 提供了一系列可配置的选项，可以使用这些选项来自定义 Webpack 配置文件。
以下是可用的选项列表：
assets- 应该复制到输出目录的文件或目录。watch- 是否启用文件监听。optimization- 构建优化选项。outputHashing- 输出文件的哈希类型。sourceMap- 是否生成 source map。extractCss- 是否将 CSS 提取为单独的文件。tsConfig- TypeScript 配置文件路径。progress- 是否显示构建进度。profile- 是否生成构建配置文件的分析报告。
示例配置文件：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ------- - ------------------- ----- - ------------------ - - ----------------------------------------- ----- ------- - - ------- - ------------------ -------------------- -- ------ ------ ------------- - ------------ - ------- ------ -- -- -------------- ------ ---------- ----- ----------- ----- --------- -------------------- --------- ----- -------- ------ -- ----- ------ - ---------------------------- -------------------- --- ---------------------- -------------- - --------- ----------------------------------- -- --------------- -- --- -- -------------- - -------展开代码
4. 结论
@angular-devkit/build-webpack 是一个功能强大的 Webpack 构建工具封装。它可以在 Angular 项目中快速实现自定义 Webpack 配置文件，并提供了一系列的插件和 loader，可以用于构建和优化 Angular 应用程序。
通过本文的介绍和示例，你可以快速入门使用 @angular-devkit/build-webpack，自定义 Webpack 配置文件，为你的 Angular 应用程序提供更优秀的构建和优化方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/193711
