如何从 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 配置