Webpack Installation Guide
1
Initialize project
1Step 1
Run: npm init -y
2
Install required packages
1Step 1
Run: npm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin
3
Add HTML page
1Step 1
Create index.html in the root folder with the following content:
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 page</title>
7 <style>
8 html, body {
9 margin: 0;
10 padding: 0;
11 height: 100vh;
12 width: 100vw;
13 overflow: hidden;
14 font-family: 'Inter', sans-serif;
15 display: flex;
16 }
17
18 .container {
19 flex: 1;
20 flex-direction: column;
21 display: flex;
22 height: 100%;
23 width: 100%;
24 }
25
26 .iframe {
27 width: 100%;
28 height: 100%;
29 border: none;
30 border-radius: 0.3rem;
31 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
32 }
33
34 .h2 {
35 text-align: center;
36 margin-bottom: 1rem;
37 color: #333;
38 }
39 </style>
40</head>
41<body>
42 <div class="container">
43 <h2>Tetrons Editor</h2>
44 <iframe
45 src="http://staging.tetrons.com/editor/dist/editor-host.html"
46 width="100%" height="600"
47 style="border: none;"
48 allowfullscreen></iframe>
49 </div>
50 <script src="main.js"></script>
51</body>
52</html>4
Create entry JS file
1Step 1
Create src/index.js with the following code:
1console.log("Blank page loaded.");5
Add webpack config
1Step 1
Create webpack.config.js with the following content:
1const path = require('path');
2const HtmlWebpackPlugin = require('html-webpack-plugin')
3
4module.exports = {
5 entry: './src/index.js',
6 output: {
7 path: path.resolve(__dirname, 'dist'),
8 filename: 'main.js',
9 clean: true
10 },
11 plugins: [
12 new HtmlWebpackPlugin({
13 template: './index.html',
14 })
15 ],
16 devServer: {
17 static: './dist',
18 port: 8080,
19 open: true
20 },
21 mode: 'development'
22};6
Update package.json scripts
1Step 1
In package.json, update the scripts section as follows:
1{
2 "name": "webpack",
3 "version": "1.0.0",
4 "description": "",
5 "main": "index.js",
6 "scripts": {
7 "start": "webpack serve",
8 "build": "webpack"
9 },
10 "keywords": [],
11 "author": "",
12 "license": "ISC",
13 "type": "commonjs",
14 "devDependencies": {
15 "html-webpack-plugin": "^5.6.3",
16 "webpack": "^5.100.2",
17 "webpack-cli": "^6.0.1",
18 "webpack-dev-server": "^5.2.2"
19 }
20}7
Start the server
1Step 1
Run: npm start
2Step 2
Or open using Live Server in VS Code
3Step 3
Or open the HTML file directly from file explorer
Output Preview
