0

我正在尝试将async-css-plugin（https://www.npmjs.com/package/async-css-plugin）添加到 Angular 项目中。这个插件的作用是，它将 html 文件中的外部样式链接标记转换为：

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

我知道我们可以扩展 webpack 配置，为此我正在使用ngx-build-plus（https://github.com/manfredsteyer/ngx-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.com/andreashuber69/async-css-angular-example

这是插件源代码https://github.com/andreashuber69/async-css-plugin/blob/37e9030fc4791370cd7efaf25a7275ff425c2d36/src/AsyncCssPlugin.ts

4

1 回答 1

0

更新了 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 }
于 2020-05-23T08:33:03.793 回答