'Why does Terser Webpack plugin generate different file names in development and production modes?

I have recently upgraded to Webpack 5, and had to drop Uglify in favour of the Terser plugin.

However now when I build my project I get different output files when I'm in different modes.

// mode: 'development'

vendors-node_modules_axios_index_js-node_modules_vue-loader_lib_runtime_componentNormalizer_j-66b5c5.js
vendors-node_modules_css-loader_dist_runtime_api_js-node_modules_css-loader_dist_runtime_cssW-d8fbbe.js
vendors-node_modules_fullstack-phone_client_index_js-node_modules_fullstack-phone_server_load-a7472a.js
vendors-node_modules_vuedraggable_dist_vuedraggable_umd_js.js

// mode: 'production'

284.js
328.js
730.js

This is making it hard to link the files in my templates and load them into my project without writing some logic in the templates to specifically pick the chunks I need, find out the file names and load them.

How can I have Terser output the same file names in both development and production modes, but keep the right chunking?

webpack-5 terser

Solution 1:^[1]

if use webpack5, change chunkIds to 'named'in production mode; see doc: https://webpack.js.org/configuration/optimization/#optimizationchunkids

optimization: {
  chunkIds: 'named'
},

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	chengfengwang

'Why does Terser Webpack plugin generate different file names in development and production modes?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]