Webpack 未命名的动态块被命名为 chunk-number 而不仅仅是数字

Question

我有一个使用动态导入的库。这种动态导入会产生一个动态块。它一直被命名为0.js，但现在它被命名为chunk-somenumber.js。我需要可预测的文件名，最好是为所有未命名的动态导入递增数字。

这是我的vue.config.js：

/* eslint-disable @typescript-eslint/no-var-requires, no-undef, import/no-extraneous-dependencies */

module.exports = {
  filenameHashing: false,
  productionSourceMap: false,

  // publicPath: './', // Remove this if html5 history.pushState is used
  configureWebpack: config => {
    config.output.filename = '[name].js'
    config.output.webassemblyModuleFilename = 'webassembly.wasm'
    // config.output.chunkFilename = '[id].js' // doesn't help
  },
  chainWebpack: config => {
    config.optimization.splitChunks(false)
  },
  css: {
    extract: {
      filename: '[name].css'
    }
  },
  devServer: {
    proxy: 'http://localhost:6969'
  }
}

我目前的输出：

web/site/dist
├── app.css
├── app.js
├── css
│   ├── creator.css
│   ├── effects.css
│   └── settings-page.css
├── favicon.ico
├── index.html
├── js
│   ├── about-page.js
│   ├── chunk-722ce30d.js // where is this name coming from?
│   ├── creator.js
│   ├── effects.js
│   ├── settings-page.js
│   ├── test-page.js
├── webassembly.wasm

我想要这个输出：

web/site/dist
├── app.css
├── app.js
├── css
│   ├── creator.css
│   ├── effects.css
│   └── settings-page.css
├── favicon.ico
├── index.html
├── js
│   ├── about-page.js
│   ├── 0.js // continuously numbered unnamed dynamic imports
│   ├── creator.js
│   ├── effects.js
│   ├── settings-page.js
│   ├── test-page.js
├── webassembly.wasm

Answer 1

我更新到 webpack 5。现在问题消失了，块又被称为 0.js。