构建后的Angular运行自定义插件

Question

我正在尝试添加 async-css-plugin (https:/www.npmjs.compackageasync-css-plugin)到Angular项目。这个插件的作用是，将html文件中的外部样式链接标签转换为类似的东西。

<link href=app.cfadf482.css rel=stylesheet media=print onload="this.media='all'">

我知道我们可以扩展webpack配置，为此我使用了 ngx-build-plus (https:/github.commanfredsteyerngx-build-plus。)

我添加了以下配置 extend.webpack.config 文件。

const HtmlWebpackPlugin = require('html-webpack-plugin');
const AsyncCssPlugin = require("async-css-plugin");

module.exports = {
  plugins: [
    new HtmlWebpackPlugin(),
    new AsyncCssPlugin({ /* options */ })
  ]
};

但现在当我运行 npm run build -- --prod --extra-webpack-config extend.webpack.config.js，它不工作。

它不修改index.html文件。

谁能指导一下，如果我遗漏了什么？

谢谢大家

更新内容这里是复制回帖 https:/github.comandreashuber69async-css-angular-example。

这里是插件的源代码 https:/github.comandreashuber69async-css-pluginblob37e9030fc4791370cd7efaf25a7275ff425c2d36srcAsyncCssPlugin.ts。

Answer 1

更新Webpack配置:-

const HtmlWebpackPlugin = require('html-webpack-plugin')
const AsyncCssPlugin = require("async-css-plugin");
var path = require('path');
module.exports = {
  output: {
    path: path.resolve(__dirname, './dist')
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new AsyncCssPlugin({ logLevel: "info" })
  ]
};

修改Angular.json Customwebpackconfig，如：-。

"customWebpackConfig": { "path": "./custom-webpack.config.js", "mergeStrategies": { "module.rules": "prepend" }, "replaceDuplicatePlugins": true }