'Webpack bundling behavior for star imports in React.js , webpack 5

lets say I have util.js file in my react project, that has various handy functions I am using across react components.

export const functionOne = () => {
   //does something
  return some_value;
}

export const functionTwo = () => {
   //does something
  return some_value;
}

export const functionThree = () => {
   //does something
  return some_value;
}    

and lets consider these 2 scenarios.

First scenario where we are using * imports in react compoent <ComponentA />

import React, { useState } from react;
import * as util from "./util.js";
const ComponentA = () => {
   return <button onClick={() => util.functionOne()} > Button </button>
}
export default ComponentA;

Second scenario where we are not doing * import and only importing some specific functions that are inside util.js file in <ComponentA />

import React, { useState } from react;
import { functionOne } from "./util.js";
const ComponentA = () => {
   return <button onClick={() => functionOne()} > Button </button>
}
export default ComponentA;

Now when webpack bundles this component <ComponentA /> in first scenario where I am using star import, does it include all the functions inside utils in bundeled file ?

I am not using Create React App.



Sources

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

Source: Stack Overflow

Solution Source