Angular CLI custom webpack config, js file not loaded

Viewed 18

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",
  }
}
0 Answers
Related