Angular CLI自定义Webpack配置 [英] Angular CLI custom webpack config

问题描述

在以前的Angular版本中，可以选择退出，以便您可以根据需要修改Webpack配置.
此功能最常见的用例之一是添加自定义Webpack加载程序.

In previous versions of Angular there was an option for eject so that you could modify your webpack configuration as you please.
One of the most common use cases for this feature was adding custom webpack loaders.

在Angular 6中，此选项已被删除，因此，目前几乎没有办法获取webpack配置(除了在angular源代码中查找它).

In Angular 6 this option has been removed, so currently there is literally no way to get the webpack config (beside looking it up in angular source code).

有什么方法可以向使用@ angular/cli 6+的Angular应用程序添加自定义webpack配置?或者，是否可以通过任何方式弹出"新的Angular CLI使用的webpack配置?

Is there any way to add a custom webpack config to Angular application that uses @angular/cli 6+? Or alternatively, is there any way to "eject" the webpack config the new Angular CLI uses under the hood?

推荐答案

免责声明:我是以下图书馆的所有者

您可以使用 angular-builders 库，该库可以扩展现有的browser和server目标使用自定义的webpack配置.

You can use angular-builders library that allows you extending the existing browser and server targets with a custom webpack config.

用法很简单:

1. 安装库:npm i -D @angular-builders/custom-webpack

2. 修改您的 angular.json :

"architect": {
   ...
   "build": {
       "builder": "@angular-builders/custom-webpack:browser"
       "options": {
              "customWebpackConfig": {
                 "path": "./extra-webpack.config.js",
                 "replaceDuplicatePlugins": true
              },
              "outputPath": "dist/my-cool-library",
              "index": "src/index.html",
              "main": "src/main.ts",
              "polyfills": "src/polyfills.ts",
              "tsConfig": "src/tsconfig.app.json"
              ...
       }

将 extra-webpack.config.js 添加到应用程序的根目录

将额外的配置放入 extra-webpack.config.js 中(只是一个简单的webpack配置)

Add extra-webpack.config.js to the root of your application

Put the extra configuration inside extra-webpack.config.js (just a plain webpack configuration)

此处，您可以找到将node-loader添加到浏览器配置的示例

Here you can find an example that adds node-loader to browser config.

进一步阅读:
自定义Angular CLI构建-替代ng弹出

这篇关于Angular CLI自定义Webpack配置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！