using webpack to import files dynamically inside react component

Question

const LongDetail: React.FC<Props> = ({
  id,
  section,
  placeholder,
  Fromtolocation,
}) => {
  const {
    setPrimary,
    setSecondary,
    createDescContent,
    setDescContent,
    setDescHeading,
  } = require(`../../store/resume/long-details/${section}`);
... ***some component logic***
}

i know webpack finds all the imports and requires statements first, then loads these modules first before compiling our react app, can i use any plugin so that webpack loads only the required file?

to do this it'll have to

1. load the required file after our app is rendered or
2. i can pass an array of files to be loaded during the bundling which will be loaded only once and then one of those files is imported based on the condition.