[英]Angular CLI custom webpack config
In previous versions of Angular there was an option for eject so that you could modify your webpack configuration as you please.在以前的 Angular 版本中,有一个弹出选项,以便您可以随意修改 webpack 配置。
One of the most common use cases for this feature was adding custom webpack loaders.此功能最常见的用例之一是添加自定义 webpack 加载器。
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 6 中,这个选项已被删除,因此目前实际上没有办法获取 webpack 配置(除了在 Angular 源代码中查找它)。
Is there any way to add a custom webpack config to Angular application that uses @angular/cli 6+?有没有办法将自定义 webpack 配置添加到使用 @angular/cli 6+ 的 Angular 应用程序? Or alternatively, is there any way to "eject" the webpack config the new Angular CLI uses under the hood?
或者,有什么方法可以“弹出”新的 Angular CLI 在后台使用的 webpack 配置?
You can use angular-builders library that allows you extending the existing browser
and server
targets (and more than that) with a custom webpack config.您可以使用angular-builders库,该库允许您使用自定义 webpack 配置扩展现有的
browser
和server
目标(以及更多目标)。
The usage is pretty simple:用法很简单:
Install the library: npm i -D @angular-builders/custom-webpack
安装库:
npm i -D @angular-builders/custom-webpack
Modify your angular.json :修改你的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" ... }
Add extra-webpack.config.js to the root of your application将extra-webpack.config.js添加到应用程序的根目录
Put the extra configuration inside extra-webpack.config.js (just a plain webpack configuration)将额外的配置放在extra-webpack.config.js 中(只是一个普通的 webpack 配置)
node-loader
to browser config.node-loader
添加到浏览器配置的示例。For Angular 8 @angular-builders/dev-server:generic
has been deprecated and @angular-builders/custom-webpack:dev-server
is being used instead, source: https://github.com/just-jeb/angular-builders/blob/master/MIGRATION.MD .对于 Angular 8
@angular-builders/dev-server:generic
已被弃用,而改用@angular-builders/custom-webpack:dev-server
,来源: https ://github.com/just-jeb/angular- 建设者/blob/master/MIGRATION.MD 。
On top of this you might need to run npm i @angular-devkit/architect@latest @angular-devkit/build-angular@latest @angular-devkit/core@latest @angular-devkit/schematics@latest
if after migrating you would have seen the following error architect_1.createBuilder is not a function
.最重要的是,如果迁移后您可能需要运行
npm i @angular-devkit/architect@latest @angular-devkit/build-angular@latest @angular-devkit/core@latest @angular-devkit/schematics@latest
见过以下错误architect_1.createBuilder is not a function
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.