I have an angular project that is using webpack. I am also lazy loading several components of my application. 2 of those components use the d3 library. Ever since I added the second component, the d3 library gets lazy loaded separately using the filename node_modules_d3_index_js.js which represents its path node_modules/d3/index.js. Is there a way to rename this to d3.js or d3.min.js.

I have this in my webpack config which seems to be adjusting how things are packed into files and their names:

optimization: {
  splitChunks: {
    minChunks: 3,
  },
  chunkIds: 'named',
}

I have an angular project that is using webpack. I am also lazy loading several components of my application. 2 of those components use the d3 library. Ever since I added the second component, the d3 library gets lazy loaded separately using the filename node_modules_d3_index_js.js which represents its path node_modules/d3/index.js. Is there a way to rename this to d3.js or d3.min.js.

I have this in my webpack config which seems to be adjusting how things are packed into files and their names:

optimization: {
  splitChunks: {
    minChunks: 3,
  },
  chunkIds: 'named',
}

• angular
• webpack

• Please share your webpack configuration – Dillon Benson Commented Nov 19, 2024 at 22:17

1 Answer 1

This seems to work well

optimization: {
  splitChunks: {
    minChunks: 3,
    chunks: "all",
    name(module, chunks, cacheGroupKey) {
      if (module.identifier().indexOf("node_modules/d3") > 0) {
          return 'd3';
      }
      return null;
    }
  },
  chunkIds: 'named',
},