Angular10配置webpack打包 「详细教程」

对于 Angular 项目，推荐使用 angular-cli 创建打包项目 Angular 会默认帮我们配置。 但是有特殊的需求时就显然不是很灵活，比如想分割一些较大的打包文件、分析每个打包文件组成，自定义webpack一些参数的时候就发现无从下手。 对许多项目的常见依赖项是日期库moment.js 。 这包括使用语言环境的功能，但是，它大大增加了整体捆绑软件的大小。这些都是需要我们优化的地方。

一、ngx-build-plus 建立额外配置

---

这里推荐一个工具库ngx-build-plus，不需要改很多东西就能在现有项目进行集成。接下来教大家如何使用，具体详情可以去github上找文档。虽然官方文档上只标注到了可用版本为9，但是Angular10也是可以使用的。

1. 使用CLI创建一个新的Angular项目

---

从零搭建Angular10项目

先决条件

在开始之前，请确保你的开发环境已经包含了 Node.js® 和 npm 包管理器。

Node.js

Angular 需要 Node.js 的 8.x 或 10.x 版本。

• 要想检查你的版本，请在终端/控制台窗口中运行 node -v 命令。

2. 添加ngx-build-plus： ng add ngx-build-plus

npm 包管理器

Angular、Angular CLI 和 Angular 应用都依赖于某些库所提供的特性和功能，它们都是 npm 包。要下载和安装 npm 包，你必须拥有一个 npm 包管理器。

本 “快速上手” 中使用的是 yarn 客户端命令行界面，管理依赖包

要想检查你是否已经安装了 yarn 客户端，请在终端/控制台窗口中运行 yarn -v 命令。

第一步：安装 Angular CLI

你要使用 Angular CLI 来创建项目、创建应用和库代码，并执行多种开发任务，比如测试、打包和发布。

全局安装 Angular CLI。

要想使用 npm 来安装 CLI，请打开终端/控制台窗口，并输入下列命令：

yarn global add @angular/cli

• 1

要想检查你是否已经安装了 angular/cli，请在终端/控制台窗口中运行 ng --version` 命令。

第二步：创建工作区和初始应用

Angular 工作区就是你开发应用的上下文环境。 每个工作区包含一些供一个或多个项目使用的文件。 每个项目都是一组由应用、库或端到端（e2e）测试构成的文件。

要想创建工作区和初始应用项目：

1. 运行 CLI 命令 ng new，并提供一个名字 my-app，如下所示：

   ng new my-app

2. ng new 会提示你要把哪些特性包含在初始的应用项目中。请按回车键接受默认值。

Angular CLI 会安装必要的 Angular npm 包及其它依赖。这可能要花几分钟。

还将创建下列工作区和初始项目文件：

• 一个新的工作区，根目录名叫 my-app
• 一个初始的骨架应用项目，也叫 my-app（但位于 src 子目录下）
• 一个端到端测试项目（位于 e2e 子目录下）
• 相关的配置文件

初始的应用项目是一个简单的 “欢迎” 应用，随时可以运行它。

ng new命令后面有很多选项，​详见https://angular.cn/cli/new，由于我们的项目大多使用less编写样式因此需要添加后缀--style less，代表项目中默认使用less，用于样式文件的文件扩展名或预处理程序。

完整命令：ng new my-app --style less

第三步：启动开发服务器

Angular 包含一个开发服务器，以便你能轻易地在本地构建应用和启动开发服务器。

1. 进入工作区目录（my-app）。
2. 使用 CLI 命令 ng serve 启动开发服务器，并带上 --open 选项。

ng serve --open

• 1

ng serve 命令会自动启动服务器，并监视你的文件变化，当你修改这些文件时，它就会重新构建应用。

--open（或只用 -o）选项会自动打开浏览器，并访问 http://localhost:4200/。

第四步：编辑你的第一个 Angular 组件

组件 是 Angular 应用中的基本构造块。 它们在屏幕上显示数据、监听用户输入，并根据这些输入采取行动。

作为初始应用的一部分，CLI 也会为你创建第一个 Angular 组件。它就是_根组件_，名叫 app-root。

1. 打开 ./src/app/app.component.ts。
2. 把 title 属性从 'my-app' 修改成 'My First Angular App'。

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']})export class AppComponent {
 title = 'My First Angular App!';}

浏览器将会用修改过的标题自动刷新。

打开 ./src/app/app.component.less 并给这个组件提供一些样式。

src/app/app.component.less

h1 {
 color: #369;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 250%;}

工作区配置文件

每个工作空间中的所有项目共享同一个 CLI 配置环境。该工作空间的顶层包含着全工作空间级的配置文件、根应用的配置文件以及一些包含根应用的源文件和测试文件的子文件夹。

工作空间配置文件

用途

.editorconfig

代码编辑器的配置。参见 EditorConfig。

.gitignore

指定 Git 应忽略的不必追踪的文件。

README.md

根应用的简介文档.

angular.json

为工作区中的所有项目指定 CLI 的默认配置，包括 CLI 要用到的构建、启动开发服务器和测试工具的配置项，比如 TSLint，Karma 和 Protractor。欲知详情，请参阅 Angular 工作空间配置 部分。

package.json

配置工作空间中所有项目可用的 npm 包依赖。有关此文件的具体格式和内容，请参阅 npm 的文档。

package-lock.json

提供 npm 客户端安装到 node_modules 的所有软件包的版本信息。欲知详情，请参阅 npm 的文档。如果你使用的是 yarn 客户端，那么该文件就是 yarn.lock。

src/

根项目的源文件。

node_modules/

向整个工作空间提供npm包。工作区范围的node_modules依赖关系对所有项目都可见。

tsconfig.json

工作空间中各个项目的默认 TypeScript 配置。比如运行项目时遇到一个问题https://blog.csdn.net/a105624...，就需要更改tsconfig.json中配置

tsconfig.base.json

供工作空间中所有项目使用的基础 TypeScript 配置。所有其它配置文件都继承自这个基础文件。欲知详情，参见 TypeScript 文档中的使用 extends 进行配置继承部分

tslint.json

工作空间中各个项目的默认 TSLint 配置。比如全局是否使用单引号，变量命名语法，每行最大字段数等等

应用项目文件

CLI 命令 ng new my-app 会默认创建名为 “my-app” 的工作空间文件夹，并在 src/ 文件夹下为工作空间顶层的根应用生成一个新的应用骨架。新生成的应用包含一个根模块的源文件，包括一个根组件及其模板。

当工作空间文件结构到位时，可以在命令行中使用 ng generate 命令往该应用中添加功能和数据。这个初始的根应用是 CLI 命令的_默认应用_（除非你在创建其它应用之后更改了默认值）。

除了在命令行中使用 CLI 之外，你还可以使用像 Angular Console 这样的交互式开发环境，或直接在应用的源文件夹和配置文件中操作这些文件。

对于单应用的工作区，工作空间的 src/ 子文件夹包含根应用的源文件（应用逻辑、数据和静态资源）。对于多项目的工作空间，projects/ 文件夹中的其它项目各自包含一个具有相同结构的 project-name/src/ 子目录。

应用源文件

顶层文件 src/ 为测试并运行你的应用提供支持。其子文件夹中包含应用源代码和应用的专属配置。

应用支持文件

目的

app/

包含定义应用逻辑和数据的组件文件。

assets/

包含要在构建应用时应该按原样复制的图像和其它静态资源文件。

environments/

包含特定目标环境的构建配置选项。默认情况下，有一个无名的标准开发环境和一个生产（“prod”）环境。你还可以定义其它的目标环境配置。

favicon.ico

用作该应用在标签栏中的图标。

index.html

当有人访问你的站点时，提供服务的主要 HTML 页面。CLI 会在构建你的应用时自动添加所有的 JavaScript 和 CSS 文件，所以你通常不用手动添加任何

如果你有多个 webpack 入口点， 他们都会在生成的HTML文件中的 script 标签内。

需要注意的是，默认angular-cli打包生成的入口文件也被配置成了index.html，所以我们需要更改angular.jaon文件中的配置。并且，由于Angular单页面应用的入口文件为main.ts 所以！chunks配置中，main 一定一定要放在最后，否则运行会出错，笔者因为没有放在最后找了一晚上的bug~~ 改为：

3.HtmlWebpackPlugin插件配置选项

您可以将配置选项的哈希值传递给html-webpack-plugin。允许的值如下：

名称

类型

默认

描述

title

{String}

Webpack App

用于生成的HTML文档的标题

filename

{String}

'index.html'

将HTML写入的文件。默认为index.html。您可以在这里指定一个子目录（如：assets/admin.html）

template

{String}

``

webpack模板的相对或绝对路径。默认情况下，它将使用（src/index.ejs如果存在）。

templateContent

{string、Function、false}

false

可用于代替template提供内联模板-请阅读“编写自己的模板”部分

templateParameters

{Boolean、Object、Function}

false

允许覆盖模板中使用的参数

inject

{Boolean、String}

true

`true

publicPath

{String、'auto'}

'auto'

用于脚本和链接标签的publicPath

scriptLoading

{'blocking'、'defer'}

'blocking'

现代浏览器支持非阻塞javascript加载（'defer'），以提高页面启动性能。

favicon

{String}

``

将给定的图标图标路径添加到输出HTML

meta

{Object}

{}

允许注入meta-tags。例如meta: {viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'}

base

{Object、String、false}

false

注入base标签。例如base: "https://example.com/path/page.html

minify

{Boolean、Object}

true如果mode是'production'，否则false

控制是否以及以何种方式最小化输出。有关更多详细信息。

hash

{Boolean}

false

如果是，true则将唯一的webpack编译哈希值附加到所有包含的脚本和CSS文件中。这对于清除缓存很有用

cache

{Boolean}

true

仅在文件被更改时发出文件

showErrors

{Boolean}

true

错误详细信息将写入HTML页面

chunks

{?}

?

仅允许您添加一些块（例如，仅单元测试块）

chunksSortMode

{String、Function}

auto

允许控制在将块包含到HTML中之前应如何对其进行排序。允许值为`'none'

excludeChunks

{Array.}

``

允许您跳过一些块（例如，不添加单元测试块）

xhtml

{Boolean}

false

如果true将link标签呈现为自动关闭（符合XHTML）

最后奉上完整的webpack.partial.js

const webpack = require('webpack') const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin const HtmlWebpackPlugin = require('html-webpack-plugin') const path = require('path') module.exports = {   externals: {        // 打包除外的文件     echarts: 'echarts'   },   optimization: {     splitChunks: {       chunks: "all",       minSize: 20000,       minChunks: 1,       maxAsyncRequests: 5,       maxInitialRequests: 3,       automaticNameDelimiter: '~',       name: true,       cacheGroups: {         moment: {           name: 'moment',           test: /[/]node_modules[/]moment[/]/,           priority: -6         },         handsontable: {           name: 'handsontable',           test: /[/]node_modules[/]handsontable[/]/,           priority: -7         },         angular: {           name: 'angular',           test: /[/]node_modules[/]@angular[/]/,           priority: -9         },         vendors: {           name: 'vendors',           test: /[/]node_modules[/]/,           priority: -10         },         default: {           name: 'default',           minChunks: 2,           priority: -20,           reuseExistingChunk: true         }       }     }   },   plugins: [     new BundleAnalyzerPlugin({       analyzerMode: 'static',     }),     new webpack.DefinePlugin({       "VERSION": JSON.stringify("4711")     }),     new HtmlWebpackPlugin({       filename: 'index.html',       template: path.join(__dirname, 'src/index.html'),       chunksSortMode: 'manual',       chunks: ['styles', 'runtime', 'polyfills', 'scripts', 'vendors', 'main']      // 限定顺序，main.js必须在最后     })   ] } 复制代码

希望大家打包顺利，项目运行快快滴。

作者：青颜的天空