最近在做angular7项目，遇到了一个问题，如何构建成一个zip包，对此也是费了几番周折，现总结出来和大家分享下。
要构建成一个zip包，就需要修改构建的配置文件。angular底层封装了webpack对项目进行构建，并且不允许外人随意修改，那如何修改webpack配置呢？下面介绍下修改方法。
- 安装ngx-build-plus依赖。可通过以下两种方式安装。
ng add ngx-build-plus
或者
cnpm install ngx-build-plus --save-dev
注意：安装ngx-build-plus时，最好和angular-cli版本一致，比如angular-cli是7.版本的，就安装ngx-build-plus7.版本，否则会出现各种各样的问题，本人就亲自踩过坑，望大家少踩坑。
2.修改angular.json配置文件
image.png
- 在根目录下新建webpack配置文件webpack.partial.js。
const webpack = require('webpack');
const path = require('path');
// const HtmlWebpackPlugin = require('html-webpack-plugin') ;
var ZipPlugin = require('zip-webpack-plugin')
module.exports = {
plugins: [
new ZipPlugin({
path:path.join(__dirname,'zip'),
filename: 'dashboard2.zip',
// pathPrefix: 'zip',
}),
],
}
4.修改package.json中构建命令
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod --extraWebpackConfig webpack.partial.js",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
5.修改打出包的路径和名称，需要修改两处tsconfig.json和angular.json
tsconfig.json修改如下
image.png
angular.json修改如下
image.png
以上有不对之处，望大家及时指正，本文章谢绝转载。谢谢！
