Use webpack bundle the frontend sample example

calendar Nov 18, 2022 ·  · Frontend Webpack Bundle  ·
: linkedin copy

Initialization the structure

 1# make the demo folder
 2mkdir webpack-demo
 3
 4# init the project
 5cd webpack-demo
 6npm init -y
 7npm install webpack webpack-cli --save-dev
 8
 9# set the project to private prevent and accidental publish to public hub
10# add the `"private": true,` to package.json
11
12# create config file for webpack  keep empty temporary
13touch webpack.config.js
14
15mkdir dist src
16touch dist/index.html
17touch src/index.js

A little the code to src/index.js

1function component() {
2    const el = document.createElement('div');
3    el.innerHTML = "<span>Hello World!</span>";
4    return el;
5}
6
7
8document.body.appendChild(component())

Also the code about the dist/index.html

 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>Webpack Demo</title>
 7</head>
 8<body>
 9    
10<script src="main.js"></script>
11</body>
12</html>

Launch the mini example

You can use the VS Code plugin to hot load the change for html and js vscode live server

1npx webpack
2
3# change the package.json add: "start": "webpack serve --open"

Reference