問題描述
環境：
最近在優化angular-cli的打包，”@angular/cli”: “~7.3.8”,angular7.2，都是最新版本預設設定。
打包後生成的runtime.js檔案太小，想把它直接寫入到html檔案中，節省一次資源請求
問題:
angular-cli不能直接配置webpack配置，查閱資料後：使用ngx-build-plus，額外寫了一個webpack配置引用，然後用插件：InlineManifestWebpackPlugin去實作寫入runtime.js的目的，具體見下圖。
結果
打包報錯循環引用，可能原因是angular-cli使用的是webpack4.0+，html-webpack-plugin卻是3.2版本。但是即使使用了html-webpack-plugin4版本依舊會報錯：TypeError: Cannot read property ‘tapAsync’ of undefined。
求助：
請教大家有沒有好的方法将runtime.js直接寫入html，而不是生成js去引用。
相關代碼
package.json
"scripts": {
"ng": "ng",
"start": "ng serve",
"build-dev": "ng build --prod --extraWebpackConfig"
},
"dependencies": {
"@angular/animations": "~7.2.0",
"@angular/common": "~7.2.0",
"@angular/compiler": "~7.2.0",
"@angular/core": "~7.2.0",
"@angular/forms": "~7.2.0",
"@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "~7.2.0",
"@angular/pwa": "^0.12.4",
"@angular/router": "~7.2.0",
"@angular/service-worker": "~7.2.0",
"@ngx-translate/core": "^11.0.1",
"@ngx-translate/http-loader": "^4.0.0",
"core-js": "^2.5.4",
"ng-lazyload-image": "^5.1.2",
"ngx-build-plus": "^7.8.1",
"ngx-infinite-scroll": "^7.1.0",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.13.0",
"@angular/cli": "~7.3.8",
"@angular/compiler-cli": "~7.2.0",
"@angular/language-service": "~7.2.0",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.5.0",
"copy-webpack-plugin": "^5.0.2",
"html-webpack-inline-source-plugin": "0.0.10",
"html-webpack-plugin": "^4.0.0-beta.5",
"inline-manifest-webpack-plugin": "^4.0.2",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.2.2",
"webpack-bundle-analyzer": "^3.3.2",
"webpack-cdn-plugin": "^3.0.0"
}
angular.json
....
"architect": {
"build": {
"builder": "ngx-build-plus:build",
....
webpack.extra.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const InlineManifestWebpackPlugin = require('inline-manifest-webpack-plugin')
module.exports = {
plugins:[
new HtmlWebpackPlugin(),
new InlineManifestWebpackPlugin()
]
}
