If chunksSortMode is set to manual, the order of the script after construction is not the order defined by the chunks.

zhenzhenChange commented 1 year ago

If chunksSortMode is set to manual, the order of the script after construction is not the order defined by the chunks.

styles is css, which can be ignored here.

Current behaviour 💣

webpack.config.js

// @ts-check

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

/** @type {import("webpack").Configuration} */
module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      inject: 'body',
      filename: 'index.html',
      template: path.join(__dirname, 'src/index.html'),
      scriptLoading: 'defer',
      chunks: ['styles', 'polyfills', 'runtime', 'angular', 'ng-zorro-antd', 'main'],
      chunksSortMode: 'manual',
    }),
  ],

  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        ng: {
          name: 'angular',
          test: /[\\/]node_modules[\\/]@angular[\\/]/,
        },
        nz: {
          name: 'ng-zorro-antd',
          test: /[\\/]node_modules[\\/]ng-zorro-antd[\\/]/,
        },
      },
    },
  },
}

build output index.html

<!DOCTYPE html>
<html lang="zh-Hans-CN">
  <head>
    <meta charset="utf-8" />
    <title>App</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="pragma" content="no-cache" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <link href="styles.e0840ca0b72b0e9b.css" rel="stylesheet" />
  </head>
  <body class="mat-typography">
    <app-root></app-root>
    <script defer="defer" src="runtime.9f40bbd43cd5d32e.js"></script>
    <script defer="defer" src="polyfills.a4a65b6685f745c4.js"></script>
    <script defer="defer" src="ng-zorro-antd.5eaca865d243e40b.js"></script>
    <script defer="defer" src="angular.67b16a43f5f5895e.js"></script>
    <script defer="defer" src="main.3727269706d3442a.js"></script>
  </body>
</html>

Expected behaviour ☀️

<script defer="defer" src="polyfills.a4a65b6685f745c4.js"></script>
<script defer="defer" src="runtime.9f40bbd43cd5d32e.js"></script>
<script defer="defer" src="angular.67b16a43f5f5895e.js"></script>
<script defer="defer" src="ng-zorro-antd.5eaca865d243e40b.js"></script>
<script defer="defer" src="main.3727269706d3442a.js"></script>

Reproduction Example 👾

I'm sorry I can't offer a reproduction at short notice, any thoughts on where the problem is to be roughly identified?

Environment 🖥

{
  "dependencies": {
    "@angular/animations": "^15.0.4",
    "@angular/common": "^15.0.4",
    "@angular/core": "^15.0.4",
    "@angular/forms": "^15.0.4",
    "@angular/platform-browser": "^15.0.4",
    "@angular/platform-browser-dynamic": "^15.0.4",
    "@angular/router": "^15.0.4",
    "@ant-design/icons-angular": "^15.0.0",
    "core-js": "^3.27.1",
    "date-fns": "^2.29.3",
    "echarts": "^5.4.1",
    "ng-zorro-antd": "^15.0.0",
    "ngx-echarts": "^15.0.1",
    "rxjs": "^7.8.0",
    "zone.js": "^0.11.8"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "^15.0.0",
    "@angular-devkit/build-angular": "^15.0.4",
    "@angular/cli": "^15.0.4",
    "@angular/compiler": "^15.0.4",
    "@angular/compiler-cli": "^15.0.4",
    "@angular/language-service": "^15.0.4",
    "html-webpack-plugin": "^5.5.0",
    "tslib": "~2.4.1",
    "typescript": "~4.8.4",
    "webpack": "^5.75.0",
    "webpack-bundle-analyzer": "^4.8.0"
  }
}

childrentime commented 1 year ago

can not repeat it.

alexander-akait commented 1 year ago

You can't put polyfills or styles before runtime, because it is runtime code and using this code you load other chunks, it is a limitation, feel free to feedback, other chunks can be depended on other chunks too

Anyway feel free to feedback

jantimon / html-webpack-plugin