angular 7 自定义webpack 配置

angular 7推荐使用angular-cli创建打包项目，但是如果如果自己有自定义的需求，改动angular封装的webpack配置就不是那么灵活，这里将说一下怎么使用自定义的webpack配置。

Dependencies

为了能使用自定义的webpack配置，我们需要安装两个npm包。可以自己根据使用的angular版本选择合适的版本下载

npm i @angular-builders/custom-webpack -D

npm i @angular-builders/dev-server -D

创建webpack.config.js文件

在根目录创建一个webpack.config的js文件。

更改angular.json的配置

"build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./webpack.config.js",
              "replaceDuplicatePlugins": true
            },
            ...
            ...
        }

以上代码就能使用自定义的webpack配置了

为了能使用ng serve，还需做如下改动

 "serve": {
          "builder": "@angular-builders/dev-server:generic",
          "options": {
            "browserTarget": "app:build",
            "proxyConfig": "proxy.conf.json",
            "port": 8100
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            },
            "ci": {
              "progress": false
            }
          }
        }

这样就可以愉快的自己去配置webpack了

注：最终的webpack配置是自定义的配置是和angular默认的配置进行merge过后的