如何通过新的@angular/cli v7 angular.json或customizedwebpack.config.

Question

@角度/cli@7+允许指定customWebpackConfig以提供自定义的网络包配置，例如：

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

从技术上讲，这个文件允许您准备、附加或替换webpack配置的任何部分。在升级到@angular@7.1.3和@angular/cli@7.1.3之前，我们已经弹出了webpack配置以进行一些添加。一个这样的添加是postcss-momentum-scrollingpostpass加载程序插件，它自动启用iOS动量滚动所有可滚动容器。

我正在寻求支持，以了解如何通过@angular/cli@7+允许的支持自定义生成必要的自定义webpack代码来加载此插件。

以下是我在custom-webpack.config.js文件中尝试的示例：

const postcssMomentumScrolling = require('postcss-momentum-scrolling');
module.exports = {
module: {
rules: [
{
test: /.scss$|.sass$/,
use: [
{
"loader": "postcss-loader",
"options": {
"plugins": [
postcssMomentumScrolling(),
]
}
}
]
},
],
},
};

我一接触到webpack配置的scss块，它似乎就进行了替换，而不是合并或预处理，从而破坏了构建。

我想知道是否有人有关于如何查看@angular/cli生成的初始webpack配置的指南或建议，这是修改的起点，也是预览/查看要作为调试执行的代码的方法。

此外，一个类似定制的例子也很棒。

谢谢！

Answer 1

我认为您需要告诉"customWebpackConfig"要合并哪个部分。像这样：

"mergeStrategies": {
"module.rules": "prepend"
}

通过这种方式，你将被告知与预科策略合并。根据"自定义webpack"文档，它应该默认为"append"，这在您的示例中似乎不是这样。

你已经有一段时间没有提出这个问题了，但我想问你是否能够解决这个问题，因为我在合并"模块规则"时遇到了一些问题。。。它似乎只有在我设置"替换"策略的情况下才有效。