Webpack is too difficult, so I’m using Vite for bundling.

Table of contents

The purpose
Environment
Create project
Bundle
Change in folder structure
Result
Reference

The purpose

use Vite for bundling. Bundling is the process of combining multiple JavaScript files into a single JavaScript file.

Webpack is well-known, but its configuration is difficult, and development has ceased, so we’ll try using Vite.

Environment

node.js: v20.16.0

Vite: 5.3.4

Create project

Create a folder for your project and run the following command in it.

npm init vite@latest

If you are asked the following, type “y” and press Enter.

Need to install the following packages:
create-vite@5.4.0
Ok to proceed? (y)

Next, you will be prompted to enter a project name. Please enter your preferred name.

Project name: »

Here’s the framework selection. Note that the text may be difficult to read depending on your environment. Use the ↑↓ keys to select.

Vanilla refers to no framework (plain Javascript).

? Select a framework: » - Use arrow-keys. Return to submit.
    Vanilla
    Vue
    React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others

Next, you will see a language selection screen. Note that the text may be difficult to read depending on your environment. You can select using the ↑↓ keys.

 Select a variant: » - Use arrow-keys. Return to submit.
    TypeScript
    JavaScript

Next, move to the project we created.

cd ProjectName

Install required modules (this may take a few minutes).

npm install

Start test server.

npm run dev

The following will be displayed. Open the URL shown under ‘Local:’ in a browser such as Chrome.

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

Be aware that the port changes each time.

The following page indicates success. (Clicking “Count is XX” will increment the Count.)

No bundling has occurred at this point.

Bundle

Execute the following commands.

npm run build

A dist folder will be created in the project, containing bundled HTML, JavaScript, and CSS. JavaScript and CSS files will be located in the dist/assets subfolder.

Change in folder structure

Here’s an optional step.

To improve folder organization and ease debugging, perform the following tasks.

Create a file named “vite.config.js” in the solution root and add the following code.

import { defineConfig } from "vite";

export default defineConfig({
  root: './src',
  base: "./",
  build: {
    outDir: '../dist', 
  },
});

The folder structure will be modified as follows:

Files used by the pages will be moved to the Src folder.

プロジェクト
|   .gitignore
|   package.json
|   package-lock.json
|   vite.config.js
|
\---src
    |   style.css
    |   main.js
    |   javascript.svg
    |   index.html
    |   counter.js
    |
    +---public
            vite.svg

Execute the following commands to build.

npm run build

A dist folder will be created under the project directory, containing the bundled files.

+---dist
|   |   vite.svg
|   |   index.html
|   |
|   \---assets
|           index-BfibREyH.css
|           index-BXSNOGaM.js

By configuring the above settings (specifically, the base: setting), the HTML file will be located at the root of the folder, not the server root.

Therefore, running npm run dev and accessing the following page (xxxx being the displayed port number) in your browser will allow you to view the bundled files.

http://localhost:xxxx/dist/

It’s also possible to display it using the Visual Studio server.

base:Without configuring settings, you cannot view the bundled files. (Because the paths are from the server root, individual files cannot be accessed.)

Result

We are able to bundle multiple files into one using Vite.

Reference

jQueryからTypeScript・Reactまで - Viteで始めるモダンで高速な開発環境構築 - ICS MEDIA

Vite（ヴィート＝フランス語で「速い」の意味）は2020年に発表された新しいフロントエンドのビルドツールです。