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

问题描述

在以前的 Angular 版本中，有一个用于 eject 这样你就可以随意修改你的 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屋！