Lightning Web Component Bundle

A component bundle in LWC is a directory containing all resources necessary for a component to function similar to aura component bundle. It encapsulates the HTML, JavaScript, CSS, metadata, and other files required for a component's complete definition.

Component File Structure

1. * HTML File (helloWorld.html)
2. * JavaScript File (helloWorld.js)
3. * Configuration File(helloWorld.js-meta.xml)
4. CSS File (helloWorld.css)
5. SVG Icon
6. Extra JS File
7. Component Test File

NOTE: Files with * are mandatory.

Key Components of a Component Bundle:

1. HTML file(.html):

   This file contains the HTML markup of your component. All contents of the HTML file must be enclosed in the template tag. The naming convention for this file i <component>.html for example myFirstLwc.html.

   <template>
       <!-- Your HTML code-->
   </template>
   

2. Javascript File(.js):This file defines the functionality of the module.We write here the code handle component events, custom events, to fetch data,to save data. Every component that contains UI needs to have at least below code in its Javascript file.

   import { LightningElement } from 'lwc';
   export default class MyComponent extends LightningElement {
   }
   

3. Component Configuration File:Every component must have the configuration file, this file contains the metadata for the component. This file defines the properties of the component like where it can be used in Salesforce, also the design attributes that can be used by admins to customize the component.
   Here is the basic configuration file example
   

   <?xml version="1.0" encoding="UTF-8"?>
              <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
              <apiVersion>45.0 </apiVersion>
              <isExposed>false</isExposed>
              </LightningComponentBundle>
        

   The naming convention for js file is <component>.js-meta.xml, example myFirstLwc.js-meta.xml
4. Component CSS File(.css): This file contains the custom styling for the component. You can use the standard CSS syntax to stylize your component.The naming convention for js file is <component>.css, example myFirstLwc.css
5. Component Icon SVG (.js-meta.xml):By default, lightning components have the lightning icon as thumbnails, but you can customize that and have your own thumbnail for your component when it is displayed in the app builder or community builder. For custom thumbnails, we put the SVG code in this file. In addition to this, you can add multiple HTML files and JS files if needed in a single component.

LWC Series

1. Lightning Web Components Folder Structure
2. Lightning data service with LWC

Conclusion:
Lightning Building dynamic and interactive user interfaces on the Salesforce platform is made possible by Web Components and component bundles. Component bundles encourage modular development and reuse by containing HTML, JavaScript, CSS, and metadata in a single directory. The real-world weather card component example demonstrates how LWC's architecture makes it easier to create complicated components while preserving great performance and scalability. You'll find countless opportunities to develop engaging user experiences both inside and outside of Salesforce as you delve deeper into the realm of LWC.