9

@angular/cli@7+ 允许customWebpackConfig指定 a 来提供自定义的 webpack 配置，例如：

  "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-scrollingpostcss-loader 插件，该插件自动启用 iOS 动量滚动在所有可滚动容器上。

我正在寻求支持，以了解如何生成必要的自定义 webpack 代码以通过@angular/cli@7+.

这是我在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 配置是修改的起点以及预览/查看作为调试执行的代码的方法有指导或建议。

此外，类似定制的示例也会很棒。

谢谢！

4

1 回答 1

1

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

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

通过这种方式，您将告诉合并与前置策略。根据“custom-webpack”文档，它应该默认为“append”，这在您的示例中似乎并非如此。

自从您提出问题以来已经有一段时间了，但我实际上想问您是否能够解决它，因为我遇到了一些问题，正在合并我的“module.rules”……它似乎只有在以下情况下才有效我设置了“替换”策略。

于 2019-05-17T07:35:23.613 回答