如何從 Angular 應用程序中查看 webpack 配置？

Question

我使用ng new my-app命令創建 Angular 應用程序。

如何查看 Angular 為我的應用構建的webpack.config ？ 我不想自定義這個 webpack 配置。 只是將其記錄到文件/屏幕...

Answer 1

Angular核心webpack 配置位於node_modules/@angular-devkit/build-angular/src/webpack/configs/browser.js中，您可以在那里更改參數。

建議是創建一個patch.js文件，以便在每次npm update后更改該文件，以防止重寫代碼。

如果您正在談論用於構建附加包的webpack ，您必須自己創建配置文件並在angular.json中引用它

Answer 2

我想有一個像你一樣的自定義 webpack配置文件並按如下方式實現它：

1. 安裝自定義 webpack 庫

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

2. 將以下配置添加到 angular.json 文件中

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

3. 如果您的項目配置了 Angular Universal (SSR)，那么您也應該在 angular.json 文件中添加以下配置：

    "architect": { ... "serve": { "builder": "@angular-builders/custom-webpack:dev-server", "options": { "customWebpackConfig": { "path": "./webpack.config.js" } } ...

   }

4. 在應用程序項目的根目錄中創建webpack.config.js並在其中編寫自定義 webpack 配置