本篇文章给大家介绍一下angular10 配置 webpack 打包的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
对于 angular 项目，推荐使用 angular-cli 创建打包项目 angular 会默认帮我们配置。但是有特殊的需求时就显然不是很灵活，比如想分割一些较大的打包文件、分析每个打包文件组成，自定义webpack一些参数的时候就发现无从下手。对许多项目的常见依赖项是日期库moment.js 。 这包括使用语言环境的功能，但是，它大大增加了整体捆绑软件的大小。这些都是需要我们优化的地方。
一、ngx-build-plus 建立额外配置这里推荐一个工具库ngx-build-plus，不需要改很多东西就能在现有项目进行集成。接下来教大家如何使用，具体详情可以去github上找文档。虽然官方文档上只标注到了可用版本为9，但是angular10也是可以使用的。
1. 使用cli创建一个新的angular项目从零搭建angular10项目
2. 添加ngx-build-plus： ng add ngx-build-plus注意：如果要将其添加到projects文件夹中的特定子项目，请使用--project开关指向它：ng add ngx-build-plus --project getting-started
备注：这一步通过npm安装包，在angular >= 7 and cli >= 7版本中，让您的项目使用自定义生成器的更新您的angular.jsonng serve和ng build。但是6版本中可能会出现安装不成功，这时候请直接yarn add ngx-build-plus --dev，然后angular.json文件中更改以下两处地方:
 build: {   - builder: @angular-devkit/build-angular:browser   + builder: ngx-build-plus:build   ... }, serve: {  - builder: @angular-devkit/build-angular:dev-server   + builder: ngx-build-plus:dev-server   ... }
相关教程推荐：《angular教程》
3. 创建文件webpack.partial.js并添加到（子）项目的根目录：  const webpack = require('webpack');    module.exports = {      plugins: [          new webpack.defineplugin({              version: json.stringify(4711)          })      ]  }
4. 在您的 app.component.ts中使用全局变量version：  import { component } from '@angular/core';    declare const version: string;    @component({      selector: 'app-root',      templateurl: './app.component.html',      styleurls: ['./app.component.css']  })  export class appcomponent {      title = 'version: ' + version;  }
5. 使用--extra-webpack-config指向部分webpack配置的开关启动应用程序：ng serve --extra-webpack-config webpack.partial.js -o
如果您的项目是基于cli的子项目，请也使用该--project开关：
ng serve --project getting-started -o --extra-webpack-config webpack.partial.js
提示：考虑为此命令创建一个npm脚本。
6. 确保显示了您的webpack配置所提供的版本。有打印结果显示就表示你的项目已经启用了webpack.partial.js文件中的配置，下面就是在webpack.partial.js中补充我们需要的功能了，笔者主要集中在了两大块。
添加bundleanalyzerplugin，分析打包文件第三方库模块分离 - optimization + splitchunks，分割较大的文件下面分别描述
二、webpack-bundle-analyzer 打包文件分析工具1.安装
$ yarn add  webpack-bundle-analyzer --dev
2.配置在webpack.partial.js中的module.exports = webpackconfig这句话的上面增加
const bundleanalyzerplugin = require('webpack-bundle-analyzer').bundleanalyzerpluginmodule.exports = {  plugins: [    new bundleanalyzerplugin({      analyzermode: 'static',    }),    new webpack.defineplugin({      version: json.stringify(4711)    })  ]}
3.运行启动服务：
生产环境查看：npm run build --report 或 正常build 即可启动查看器
开发环境查看：webpack -p --progress 或启动正常devserver服务即可启动查看器!
4.结果
5.该插件默认配置new bundleanalyzerplugin({      // openanalyzer: true,      // reportfilename: path.join(__dirname, 'report.html')      //  可以是`server`，`static`或`disabled`。      //  在`server`模式下，分析器将启动http服务器来显示软件包报告。      //  在“静态”模式下，会生成带有报告的单个html文件。      //  在`disabled`模式下，你可以使用这个插件来将`generatestatsfile`设置为`true`来生成webpack stats json文件。      analyzermode: 'static',      //  将在“服务器”模式下使用的主机启动http服务器。      // analyzerhost: '127.0.0.1',      //  将在“服务器”模式下使用的端口启动http服务器。      // analyzerport: 8888,      //  路径捆绑，将在`static`模式下生成的报告文件。      //  相对于捆绑输出目录。      // reportfilename: 'report.html',      //  模块大小默认显示在报告中。      //  应该是`stat`，`parsed`或者`gzip`中的一个。      //  有关更多信息，请参见“定义”一节。      // defaultsizes: 'parsed',      //  在默认浏览器中自动打开报告      // openanalyzer: true,      //  如果为true，则webpack stats json文件将在bundle输出目录中生成      // generatestatsfile: false,      //  如果`generatestatsfile`为`true`，将会生成webpack stats json文件的名字。      //  相对于捆绑输出目录。      // statsfilename: 'stats.json',      //  stats.tojson（）方法的选项。      //  例如，您可以使用`source：false`选项排除统计文件中模块的来源。      //  在这里查看更多选项：https：  //github.com/webpack/webpack/blob/webpack-1/lib/stats.js#l21      // statsoptions: null,      // loglevel: 'info' // 日志级别。可以是'信息'，'警告'，'错误'或'沉默'。    }),
模块功能：能够查看到你的文件打包压缩后中真正的内容，找出那些模块组成最大的大小，找到错误的模块，优化它！最好的事情是它支持缩小捆绑！它解析它们以获得实际大小的捆绑模块。它也显示他们的gzipped大小！
三、使用webpack把第三方库模块分离 - optimization + splitchunks在 webpack4.x 中，我们使用 optimization.splitchunks 来分离公用的代码块。splitchunks插件简单的来说就是webpack中一个提取或分离代码的插件，主要作用是提取公共代码，防止代码被重复打包，拆分过大的js文件，合并零散的js文件。
这里说的分离，当然只是针对一些第三方库（一般来自 node_modules），以及我们自己定义的工具库（或公用方法）。
不知如何下手？首先，我们来看官网给的一份
1. 默认配置：splitchunks: {    chunks: async,    minsize: 30000,    minchunks: 1,    maxasyncrequests: 5,    maxinitialrequests: 3,    automaticnamedelimiter: '~',    name: true,    cachegroups: {        vendors: {            test: /[\\/]node_modules[\\/]/,            priority: -10        },    default: {            minchunks: 2,            priority: -20,            reuseexistingchunk: true        }    }}
接着，我们再来看下它们的含义：
chunks： 该属性值的数据类型可以是 字符串 或者 函数。如果是字符串，那它的值可能为 initial | async | all 三者之一。默认值的数据类型为 字符串，默认值为 async，但推荐用 all。它表示将哪种类型的模块分离成新文件。字符串参数值的作用分别如下：
initial：表示对异步引入的模块不处理async：表示只处理异步模块all：无论同步还是异步，都会处理minsize： 该属性值的数据类型为数字。它表示将引用模块分离成新代码文件的最小体积，默认为 30000，单位为字节，即 30k（指min+gzip之前的体积）。这里的 30k 应该是最佳实践，因为如果引用模块小于 30k 就分离成一个新代码文件，那页面打开时，势必会多增加一个请求。
maxsize： 把提取出来的模块打包生成的文件大小不能超过maxsize值，如果超过了，要对其进行分割并打包生成新的文件。单位为字节，默认为0，表示不限制大小。
minchunks： 该属性值的数据类型为数字。它表示将引用模块如不同文件引用了多少次，才能分离生成新代码文件。默认值为 1
maxasyncrequests： 该属性值的数据类型为数字，默认值为 5。它表示按需加载最大的并行请求数，针对异步。
maxinitialrequests： 该属性值的数据类型为数字，默认值为 3。它表示单个入口文件最大的并行请求数，针对同步。
automaticnamedelimiter： 该属性值的数据类型为字符串，默认值为。它表示分离后生成新代码文件名称的链接符，比如说 app1.js 和 app2.js 都引用了 utils.js 这个工具库，那么，最后打包后分离生成的公用文件名可能是 xxapp1~app2.js 这样的，即以 ~ 符号连接。
name： 该属性值的数据类型可以是 布尔值 或者 函数（返回值为字符串），其中布尔值得为 true，此时，分离文件后生成的文件名将基于 cachegroups 和 automaticnamedelimiter。如果设置为 false，则不会进行模块分离。
cachegroups： 该属性值的数据类型为对象，它的值可以继承 splitchunks.* 中的内容。如果 cachegroups存在与 splitchunks.* 同名的属性，则 cachegroups 的属性值则直接覆盖 splitchunks.* 中设置的值。
test： 该属性值的数据类型可以为 字符串 或 正则表达式，它规定了哪些文件目录的模块可以被分离生成新文件。
priority： 该属性值的数据类型可以为数字，默认值为 0。它表示打包分离文件的优先
reuseexistingchunk： 该属性值的数据类型可以为布尔值。它表示针对已经分离的模块，不再重新分离。
2.分离第三方库要将第三方库分离出来，我们需要调整配置文件，设置 chunks: 'all'，即表示让所有加载类型的模块在某些条件下都能打包。
3.分离工具函数打包中，我们发现，工具函数模块（utils）的源码被分别打包到了两个文件中，这显然是不对。之所以出现这种情况，是因为我们设置了 minsize: 30000，即分离成独立文件的最小体积为 30k，而这里的 工具函数（utils.js）只有几kb，所以，没被分离成单独的文件。
4.第三方库合并打包并重命名有的时候，我们希望将所有来自 node_modules 的第三方库都打包到同一个文件中。显然，上面的打包配置并没有满足这个条件。并且，我们还希望可以对打包后的文件名进行重命名。
要完成，只需要在 cachegroups 设置 name 属性即可。这里，笔者还把项目中使用到的moment、handsontable、angular库单独分离出来了。
// webpack.config.jsmodule.exports = {  optimization: {    splitchunks: {      chunks: 'all',      minsize: 30000,      maxsize: 0,      minchunks: 1,      maxasyncrequests: 5,      maxinitialrequests: 3,      automaticnamedelimiter: '~',      name: true,      cachegroups: {        moment: {          name: 'moment',          test: /[\\/]node_modules[\\/]moment[\\/]/,          priority: -6 // 两个cachegroup.priority相同时，先定义的会先命中        },        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        }      }    }  }}
5.splitchunks插件配置选项chunks选项，决定要提取那些模块。
默认是async：只提取异步加载的模块出来打包到一个文件中。异步加载的模块：通过import('xxx')或require(['xxx'],() =>{})加载的模块。
initial：提取同步加载和异步加载模块，如果xxx在项目中异步加载了，也同步加载了，那么xxx这个模块会被提取两次，分别打包到不同的文件中。同步加载的模块：通过 import xxx或require('xxx')加载的模块。
all：不管异步加载还是同步加载的模块都提取出来，打包到一个文件中。
minsize选项：规定被提取的模块在压缩前的大小最小值，单位为字节，默认为30000，只有超过了30000字节才会被提取。
maxsize选项：把提取出来的模块打包生成的文件大小不能超过maxsize值，如果超过了，要对其进行分割并打包生成新的文件。单位为字节，默认为0，表示不限制大小。
minchunks选项：表示要被提取的模块最小被引用次数，引用次数超过或等于minchunks值，才能被提取。
maxasyncrequests选项：最大的按需(异步)加载次数，默认为 6。
maxinitialrequests选项：打包后的入口文件加载时，还能同时加载js文件的数量（包括入口文件），默认为4。
先说一下优先级 maxinitialrequests / maxasyncrequests <maxsize<minsize。
automaticnamedelimiter选项：打包生成的js文件名的分割符，默认为~。
name选项：打包生成js文件的名称。
cachegroups选项，核心重点，配置提取模块的方案。里面每一项代表一个提取模块的方案。下面是cachegroups每项中特有的选项，其余选项和外面一致，若cachegroups每项中有，就按配置的，没有就使用外面配置的。
test选项：用来匹配要提取的模块的资源路径或名称。值是正则或函数。
priority选项：方案的优先级，值越大表示提取模块时优先采用此方案。默认值为0。
reuseexistingchunk选项：true/false。为true时，如果当前要提取的模块，在已经在打包生成的js文件中存在，则将重用该模块，而不是把当前要提取的模块打包生成新的js文件。
enforce选项：true/false。为true时，忽略minsize，minchunks，maxasyncrequests和maxinitialrequests外面选项
四、htmlwebpackplugin
htmlwebpackplugin简化了html文件的创建，以便为你的webpack包提供服务。这对于在文件名中包含每次会随着编译而发生变化哈希的 webpack bundle 尤其有用。 你可以让插件为你生成一个html文件，这个插件有两个重要作用。
创建html页面文件到你的输出目录将webpack打包后的chunk自动引入到这个html中1.安装npm install --save-dev html-webpack-plugin
使用yarn
yarn add --dev html-webpack-plugin
2.基本用法该插件将为你生成一个 html5 文件， 其中包括使用 script 标签的 body 中的所有 webpack 包。 只需添加插件到你的 webpack 配置如下：
const htmlwebpackplugin = require('html-webpack-plugin')const path = require('path')module.exports = { plugins: [ new webpack.defineplugin({ "version": json.stringify("4711") }), new htmlwebpackplugin({ filename: 'index.html', // 根据模板文件生成的html的文件名 template: path.join(__dirname, 'src/index.html'), chunkssortmode: 'manual', chunks: ['styles', 'runtime', 'polyfills', 'scripts', 'vendors', 'main'] }) ]}
这将会产生一个包含以下内容的文件 dist/index.html：
<!doctype html><html><head>  <meta charset="utf-8">  <meta http-equiv="pragma" content="no-cache"/>  <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate"/>  <meta http-equiv="expires" content="0"/>  <meta name="viewport" content="width=device-width,initial-scale=1">  <meta name="renderer" content="webkit">  <meta name="force-rendering" content="webkit">  <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1"/>  <title>test</title>  <base href="/">  <link rel="icon" type="image/png" href="favicon.png">  <link href="styles.bf72314ba2e0c15c73f2.css" rel="stylesheet"></head><body><app-root></app-root><div id="preloader">  <div>    <div class="loader loader--glisteningwindow"></div>  </div></div><script src="runtime.fe0efdd131eb00c21b3a.js"></script><script src="vendors.6d9d661339fe7a583752.js"></script><script src="polyfills.5cb77843a9758f0097e1.js"></script><script src="scripts.d526d9658102820143d1.js"></script><script src="moment.65d799ec0675b5ff9b59.js"></script><script src="handsontable.c50df86ef38503e832a5.js"></script><script src="main.db888715d5d02500d39e.js"></script></body></html>
如果你有多个 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.<string>} `` 允许您跳过一些块（例如，不添加单元测试块）
xhtml {boolean} false 如果true将link标签呈现为自动关闭（符合xhtml）
最后奉上完整的webpack.partial.js
const webpack = require('webpack')const bundleanalyzerplugin = require('webpack-bundle-analyzer').bundleanalyzerpluginconst 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必须在最后    })  ]}
希望大家打包顺利，项目运行快快滴。
demo地址：
https://github.com/qinqing3761/webpack-build-demo
更多编程相关知识，请访问：编程入门！！
以上就是angular10如何配置webpack打包？方法介绍的详细内容。