Skip to content

Commit 8b32dd6

Browse files
thuankg1752thuankg1752
committed
refactor: webpack auto read file name, component navigation
1 parent 3fbd092 commit 8b32dd6

File tree

5 files changed

+101
-53
lines changed

5 files changed

+101
-53
lines changed

‎component/nav.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<div class="git-notifier-sidebar__container">
2+
<div class="git-notifier-sidebar__content">
3+
<div class="git-notifier-sidebar__content-head">
4+
<p class="git-notifier-sidebar__content-logo">CSLANT</p>
5+
</div>
6+
<ul class="git-notifier-sidebar__list-container">
7+
<li class="git-notifier-sidebar__list-item"><a href="#">Home</a></li>
8+
<li class="git-notifier-sidebar__list-item"><a href="#">item1</a></li>
9+
<li class="git-notifier-sidebar__list-item"><a href="#">item2</a></li>
10+
<li class="git-notifier-sidebar__list-item"><a href="#">item3</a></li>
11+
<li class="git-notifier-sidebar__list-item"><a href="#">item4</a></li>
12+
<li class="git-notifier-sidebar__list-item"><a href="#">item5</a></li>
13+
</ul>
14+
</div>
15+
</div>
16+
<!--add script logic (optional)-->

‎html/index.html

Lines changed: 19 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -7,31 +7,19 @@
77
</head>
88

99
<body>
10-
<nav>
11-
<div class="git-notifier-sidebar__container">
12-
<div class="git-notifier-sidebar__content">
13-
<div class="git-notifier-sidebar__content-head">
14-
<p class="git-notifier-sidebar__content-logo">CSLANT</p>
15-
</div>
16-
<ul class="git-notifier-sidebar__list-container">
17-
<li class="git-notifier-sidebar__list-item"><a href="#">Home</a></li>
18-
<li class="git-notifier-sidebar__list-item"><a href="#">item1</a></li>
19-
<li class="git-notifier-sidebar__list-item"><a href="#">item2</a></li>
20-
<li class="git-notifier-sidebar__list-item"><a href="#">item3</a></li>
21-
<li class="git-notifier-sidebar__list-item"><a href="#">item4</a></li>
22-
<li class="git-notifier-sidebar__list-item"><a href="#">item5</a></li>
23-
</ul>
24-
</div>
25-
</div>
26-
</nav>
27-
28-
10+
<nav></nav>
2911
<div class="git-notifier-main-content__container">
30-
12+
3113
<div class="git-notifier-main-content__header">
3214
<div class="git-notifier-main-content__mode">
33-
<input type="checkbox" id="toggleSystemMode">
34-
<label id="switch" for="toggleSystemMode">
15+
<input
16+
type="checkbox"
17+
id="toggleSystemMode"
18+
>
19+
<label
20+
id="switch"
21+
for="toggleSystemMode"
22+
>
3523
<div id="circle"></div>
3624
<div id="lightMode">Light</div>
3725
<div id="darkMode">Dark</div>
@@ -43,7 +31,14 @@
4331
</div>
4432
</div>
4533

46-
34+
<script>
35+
fetch('../component/nav.html')
36+
.then(response => response.text())
37+
.then(html => {
38+
document.querySelector('nav').innerHTML = html;
39+
})
40+
.catch(error => console.error('Error loading the navigation:', error));
41+
</script>
4742
</body>
4843

49-
</html>
44+
</html>

‎inject-multiple-components-loader.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
const fs = require('fs');
2+
const path = require('path');
3+
4+
module.exports = function(source) {
5+
const components = this.getOptions().components || [];
6+
7+
components.forEach(component => {
8+
const componentPath = path.resolve(__dirname, component.path);
9+
const componentHtml = fs.readFileSync(componentPath, 'utf8');
10+
source = source.replace(component.placeholder, `<div>${componentHtml}</div>`);
11+
});
12+
13+
return source;
14+
};

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@
4646
"serve": "webpack serve"
4747
},
4848
"dependencies": {
49+
"html-loader": "^5.0.0",
4950
"node-sass": "^9.0.0"
5051
}
5152
}

‎webpack.config.js

Lines changed: 51 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,62 @@
11
// Generated using webpack-cli https://github.com/webpack/webpack-cli
22

33
const path = require('path');
4+
const fs = require('fs');
45
const HtmlWebpackPlugin = require('html-webpack-plugin');
56
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
67

78
const isProduction = process.env.NODE_ENV === 'production';
89

910
const stylesHandler = MiniCssExtractPlugin.loader;
1011

11-
let htmlPageNames = ['example1'];
12-
let multipleHtmlPlugins = htmlPageNames.map(name => {
13-
return new HtmlWebpackPlugin({
14-
template: `html/${name}.html`, // relative path to the HTML files
15-
filename: `${name}.html`, // output HTML files
16-
chunks: [`${name}`] // respective JS files
17-
})
12+
// read all html files in 'html' folder
13+
const htmlDirectory = path.resolve(__dirname, 'html');
14+
15+
// get all html file names except 'index.html'
16+
const htmlPageNames = fs.readdirSync(htmlDirectory)
17+
.filter(file => file.endsWith('.html') && file !== 'index.html')
18+
.map(file => file.replace('.html', ''));
19+
20+
const multipleHtmlPlugins = htmlPageNames.map(name => {
21+
return new HtmlWebpackPlugin({
22+
template: `${htmlDirectory}/${name}.html`,
23+
filename: `${name}.html`,
24+
chunks: [name]
25+
});
1826
});
1927

28+
29+
function generateComponentOptions(componentDir) {
30+
const directoryPath = path.resolve(__dirname, componentDir);
31+
const components = fs.readdirSync(directoryPath)
32+
.filter(file => file.endsWith('.html'))
33+
.map(file => ({
34+
path: path.join(componentDir, file),
35+
placeholder: `<${path.basename(file, '.html')}></${path.basename(file, '.html')}>`
36+
}));
37+
38+
return components;
39+
}
40+
41+
const components = generateComponentOptions('./component');
42+
2043
const config = {
21-
entry: './src/index.ts',
44+
entry: './src/index.ts',
2245
output: {
23-
path: path.resolve(__dirname, 'dist'),
24-
},
46+
path: path.resolve(__dirname, 'dist')
47+
},
2548
devServer: {
26-
open: true,
27-
host: 'localhost',
28-
},
49+
open: true,
50+
host: 'localhost'
51+
},
2952
plugins: [
3053
new HtmlWebpackPlugin({
31-
template: 'html/index.html',
54+
template: `${htmlDirectory}/index.html`
3255
}),
33-
3456
new MiniCssExtractPlugin({
3557
filename: '[name].css',
3658
chunkFilename: '[id].css',
3759
}),
38-
39-
// Add your plugins here
40-
// Learn more about plugins from https://webpack.js.org/configuration/plugins/
4160
].concat(multipleHtmlPlugins),
4261
module: {
4362
rules: [
@@ -54,21 +73,24 @@ const config = {
5473
test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
5574
type: 'asset',
5675
},
57-
58-
// Add your rules for custom modules here
59-
// Learn more about loaders from https://webpack.js.org/loaders/
76+
{
77+
test: /\.html$/,
78+
use: [
79+
'html-loader',
80+
{
81+
loader: path.resolve(__dirname, 'inject-multiple-components-loader.js'),
82+
options: {
83+
components: components
84+
}
85+
}
86+
]
87+
},
6088
],
6189
},
6290
resolve: {
6391
extensions: ['.tsx', '.ts', '.jsx', '.js', '...'],
6492
},
93+
mode: isProduction ? 'production' : 'development'
6594
};
6695

67-
module.exports = () => {
68-
if (isProduction) {
69-
config.mode = 'production';
70-
} else {
71-
config.mode = 'development';
72-
}
73-
return config;
74-
};
96+
module.exports = config;

0 commit comments

Comments
 (0)