when i use --extra-webpack-config enject webpack config
"build": "ng build --prod --extra-webpack-config webpack.partial.js -o",
webpack config splitchunk, but after compilation and deployment, static resources not send request, I found JS introduced by HTML not to load content, request js file has respones, but js file not loaded.
Before the configuration enter image description here
after the configuration enter image description here
main.js, runtime and polyfills why not to load content? this is my webpack.partial.js config
const webpack = require('webpack');
const pkg = require('./package.json');
const path = require('path');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
optimization: {
// concatenateModules: false,
splitChunks: {
chunks: 'all',
minSize: 30000,
// minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 5,
cacheGroups: {
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
},
angular: {
test: /[\\/]node_modules[\\/](angular)[\\/]/,
name: 'angular',
priority: 3
},
monaco_editor: {
test: /[\\/]node_modules[\\/](monaco-editor)[\\/]/,
name: 'monaco-editor',
priority: 2
},
vendors: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
priority: 1,
reuseExistingChunk: true
}
}
}
// runtimeChunk: {
// name: 'manifest'
// },
},
plugins: [
new MonacoWebpackPlugin({
languages: [
'css'
],
features: ['!accessibilityHelp']
}),
new webpack.DefinePlugin({
APP_VERSION: JSON.stringify(pkg.version)
}),
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.join(__dirname, 'src/index.html'),
chunksSortMode: 'manual',
chunks: ['styles', 'runtime', 'polyfills', 'scripts', 'vendors', 'main']
})
]
};
this is my angular.json config
"architect": {
"build": {
"builder": "ngx-build-plus:browser",
"options": {
"outputPath": "dist/onenote",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets",
{
"glob": "**/*",
"input": "./node_modules/mathjax",
"output": "/"
},
{
"glob": "**/*",
"input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
"output": "/assets/"
},
{
"glob": "**/*",
"input": "./WEB-INF",
"output": "/WEB-INF/"
}
],
"styles": [
"src/styles/theme/dark/antd-dark.less",
"src/styles/theme/light/antd-light.less",
"src/styles.less",
"./node_modules/highlight.js/styles/github.css",
"./node_modules/monaco-editor/min/vs/editor/editor.main.css",
"./node_modules/github-markdown-css/github-markdown.css"
],
"stylePreprocessorOptions": {
"includePaths": [
"src/styles/theme",
"src/styles/theme/dark",
"src/styles/theme/light"
]
},
"scripts": [
"node_modules/mathjax/MathJax.js",
"node_modules/systemjs/dist/s.js",
"node_modules/systemjs/dist/extras/amd.js",
"node_modules/systemjs/dist/extras/named-register.js",
"node_modules/systemjs/dist/extras/use-default.js"
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": true,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": false
}
}
},
"serve": {
"builder": "ngx-build-plus:dev-server",
"options": {
"browserTarget": "onenote:build"
},
"configurations": {
"production": {
"browserTarget": "onenote:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "onenote:build"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
}
}