angualr7项目构建打zip包

    最近在做angular7项目，遇到了一个问题，如何构建成一个zip包，对此也是费了几番周折，现总结出来和大家分享下。
    要构建成一个zip包，就需要修改构建的配置文件。angular底层封装了webpack对项目进行构建，并且不允许外人随意修改，那如何修改webpack配置呢？下面介绍下修改方法。

1. 安装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

3. 在根目录下新建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

以上有不对之处，望大家及时指正，本文章谢绝转载。谢谢！