Skip to content

Commit 2bc1662

Browse files
spacedrone404spacedrone404
committed
Lots of fixes
1 parent d1e79e6 commit 2bc1662

40 files changed

Lines changed: 370 additions & 276 deletions

package-backup renamed to _archive/template/package-backup

File renamed without changes.

‎_archive/template/package.json‎

Lines changed: 0 additions & 32 deletions
This file was deleted.

‎_archive/template/postcss.config.js‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

webpack.config-backup.js renamed to _archive/template/webpack.config-backup.js

File renamed without changes.

‎_archive/template/webpack.config.js‎

Lines changed: 253 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,99 +1,297 @@
11
const path = require("path");
2-
const PugPlugin = require("pug-plugin");
32
const HtmlWebpackPlugin = require("html-webpack-plugin");
3+
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
4+
const CopyWebpackPlugin = require("copy-webpack-plugin");
5+
6+
// const PugPlugin = require("pug-plugin");
7+
8+
// Function to auto-reload page even after webpack error compilation
9+
10+
// class RetryAfterErrorPlugin {
11+
// apply(compiler) {
12+
// let timeoutId;
13+
// compiler.hooks.done.tap("RetryAfterPlugin", (stats) => {
14+
// if (stats.hasErrors()) {
15+
// if (timeoutId) {
16+
// clearTimeout(timeoutId);
17+
// }
18+
// timeoutId = setTimeout(() => {
19+
// compiler.watching.invalidate();
20+
// }, 4000);
21+
// }
22+
// });
23+
// }
24+
// }
425

526
module.exports = {
27+
watch: true, // Force watch mode to detect all file changes
28+
29+
// Multiple entry points for mount points, CSS sucked by JS
630
entry: {
7-
index: "./src/index.pug",
8-
screen1: "./src/screen1.pug",
9-
screen2: "./src/screen2.pug",
10-
admin: "./src/admin.pug",
11-
list: "./src/list.pug",
12-
today: "./src/today.pug",
13-
presets: "./src/presets.pug",
14-
about: "./src/about.pug",
15-
settings: "./src/settings.pug",
16-
ads: "./src/ads.pug",
17-
demo: "./src/demo.pug",
31+
index: "./src/js/index.js",
32+
projects: "./src/js/projects.js",
33+
"web-snippets": "./src/js/web-snippets.js",
34+
"storage-tools": "./src/js/storage-tools.js",
35+
"batch-tools": "./src/js/batch-tools.js",
36+
settings: "./src/js/settings.js",
37+
about: "./src/js/about.js",
38+
"no-mobile": "./src/js/no-mobile.js",
39+
output1: "./src/js/output1.js",
40+
output2: "./src/js/output2.js",
41+
testbed1: "./src/js/testbed1.js",
42+
testbed2: "./src/js/testbed2.js",
43+
// output1, output2, testbed1, testbed2 pages for testing
1844
},
1945

46+
// Output configuration
2047
output: {
21-
path: path.join(__dirname, "dist"),
48+
path: path.resolve(__dirname, "dist"),
49+
filename: "js/[name].bundle.js",
50+
publicPath: "/",
51+
// publicPath: "./",
2252
clean: true,
2353
},
24-
2554
module: {
2655
rules: [
56+
// JavaScript processing with Babel
2757
{
2858
test: /\.js$/,
29-
use: "babel-loader",
3059
exclude: /node_modules/,
60+
use: {
61+
loader: "babel-loader",
62+
options: {
63+
presets: ["@babel/preset-env"],
64+
},
65+
},
3166
},
67+
// SCSS compilation and extraction
3268
{
33-
test: /\.pug$/,
34-
loader: PugPlugin.loader,
35-
},
36-
{
37-
test: /\.(sass|scss|css)$/,
69+
test: /\.(scss|css)$/,
3870
use: [
39-
"css-loader",
40-
"postcss-loader",
4171
{
42-
loader: "sass-loader",
72+
loader: MiniCssExtractPlugin.loader,
4373
options: {
44-
sourceMap: true,
74+
publicPath: "../", // Points to dist root from css folder
4575
},
4676
},
77+
"css-loader",
78+
"sass-loader",
4779
],
4880
},
81+
// Image handling (JPG, WebP, SVG, etc.)
82+
// !File-loader is already depricated, using Asset/Resource method
83+
{
84+
test: /\.(jpg|jpeg|png|gif|svg|webp)$/i,
85+
type: "asset/resource",
86+
generator: {
87+
filename: "media/img/[name][ext]",
88+
},
89+
},
90+
// Audio support
4991
{
50-
test: /\.(png|jpg|jpeg|gif|svg|mp4)$/i,
92+
test: /\.(mp3)$/,
5193
type: "asset/resource",
5294
generator: {
53-
filename: path.join("images", "[name].[contenthash][ext]"),
95+
filename: "media/aud/[name][contenthash:8][ext]",
5496
},
5597
},
98+
// Font support
5699
{
57-
test: /\.(woff2?|eot|ttf|otf)$/i,
100+
test: /\.(woff|woff2)$/,
58101
type: "asset/resource",
59102
generator: {
60-
filename: "fonts/[name][ext][query]",
103+
filename: "fonts/[name][contenthash:8].[ext]",
61104
},
62105
},
106+
// Document handling (TXT, PDF)
107+
{
108+
test: /\.(txt|pdf)$/,
109+
type: "asset/resource",
110+
generator: {
111+
filename: "media/docs/[name][contenthash:8].[ext]",
112+
},
113+
},
114+
// Video handling (MP4)
115+
{
116+
test: /\.mp4$/i,
117+
type: "asset/resource",
118+
generator: {
119+
filename: "media/videos/[name][hash:8].[ext]",
120+
},
121+
},
122+
// PUG processing
123+
{
124+
test: /\.pug$/,
125+
use: [
126+
{
127+
loader: "pug-loader",
128+
options: {
129+
esModule: false, // Enables CommonJS-style `require()` in PUG
130+
},
131+
},
132+
],
133+
},
63134
],
64135
},
65-
66136
plugins: [
67-
new PugPlugin({
68-
pretty: true,
69-
js: {
70-
filename: "js/[name].[contenthash:8].js",
71-
},
72-
css: {
73-
filename: "css/[name].[contenthash:8].css",
74-
},
137+
// Custom Webpack auto reloader
138+
// new RetryAfterErrorPlugin(),
139+
140+
// Extract CSS into separate files
141+
new MiniCssExtractPlugin({
142+
filename: "css/[name].css",
143+
}),
144+
// Generate render points from PUG
145+
// ...[
146+
// "index",
147+
// "projects",
148+
// "web-snippets",
149+
// "storage-tools",
150+
// "batch-tools",
151+
// "settings",
152+
// "about",
153+
// "no-mobile",
154+
// "output1",
155+
// "output2",
156+
// "testbed1",
157+
// "testbed2",
158+
// ].map(
159+
// (page) =>
160+
// new HtmlWebpackPlugin({
161+
// template: `./src/${page}.pug`,
162+
// filename: `${page}.html`,
163+
// chunks: [page],
164+
// inject: true,
165+
// })
166+
// ),
167+
168+
new HtmlWebpackPlugin({
169+
template: "./src/index.pug",
170+
filename: "index.html",
171+
chunks: ["index"],
172+
inject: true,
173+
}),
174+
new HtmlWebpackPlugin({
175+
template: "./src/projects.pug",
176+
filename: "projects.html",
177+
chunks: ["projects"],
178+
inject: true,
179+
}),
180+
new HtmlWebpackPlugin({
181+
template: "./src/web-snippets.pug",
182+
filename: "web-snippets.html",
183+
chunks: ["web-snippets"],
184+
inject: true,
185+
}),
186+
new HtmlWebpackPlugin({
187+
template: "./src/storage-tools.pug",
188+
filename: "storage-tools.html",
189+
chunks: ["storage-tools"],
190+
inject: true,
191+
}),
192+
new HtmlWebpackPlugin({
193+
template: "./src/batch-tools.pug",
194+
filename: "batch-tools.html",
195+
chunks: ["batch-tools"],
196+
inject: true,
197+
}),
198+
new HtmlWebpackPlugin({
199+
template: "./src/settings.pug",
200+
filename: "settings.html",
201+
chunks: ["settings"],
202+
inject: true,
203+
}),
204+
new HtmlWebpackPlugin({
205+
template: "./src/about.pug",
206+
filename: "about.html",
207+
chunks: ["about"],
208+
inject: true,
209+
}),
210+
new HtmlWebpackPlugin({
211+
template: "./src/no-mobile.pug",
212+
filename: "no-mobile.html",
213+
chunks: ["no-mobile"],
214+
inject: true,
215+
}),
216+
new HtmlWebpackPlugin({
217+
template: "./src/output1.pug",
218+
filename: "output1.html",
219+
chunks: ["output1"],
220+
inject: true,
221+
}),
222+
new HtmlWebpackPlugin({
223+
template: "./src/output2.pug",
224+
filename: "output2.html",
225+
chunks: ["output2"],
226+
inject: true,
227+
}),
228+
new HtmlWebpackPlugin({
229+
template: "./src/testbed1.pug",
230+
filename: "testbed1.html",
231+
chunks: ["testbed1"],
232+
inject: true,
233+
}),
234+
new HtmlWebpackPlugin({
235+
template: "./src/testbed2.pug",
236+
filename: "testbed2.html",
237+
chunks: ["testbed2"],
238+
inject: true,
239+
}),
240+
// Copy assets to dist folder regardless of their usage or not
241+
242+
new CopyWebpackPlugin({
243+
patterns: [
244+
{
245+
from: "src/media/aud",
246+
to: "media/aud",
247+
noErrorOnMissing: true,
248+
},
249+
// {
250+
// from: "src/media/img",
251+
// to: "media/img",
252+
// noErrorOnMissing: true,
253+
// },
254+
{
255+
from: "src/media/docs",
256+
to: "media/docs",
257+
noErrorOnMissing: true,
258+
},
259+
{
260+
from: "src/fonts",
261+
to: "fonts",
262+
noErrorOnMissing: true,
263+
},
264+
],
75265
}),
76266
],
77267

268+
// new CopyWebpackPlugin({
269+
// patterns: [
270+
// { from: "src/media/aud", to: "media/aud" },
271+
// // turn on if you like to work with video files
272+
// // { from: "src/media/vid", to: "media/vid" },
273+
// { from: "src/media/img", to: "media/img" },
274+
// { from: "src/media/docs", to: "media/docs" },
275+
// ],
276+
// }),
277+
278+
// Makes sure that all changes are monitored
279+
watchOptions: {
280+
poll: true,
281+
ignored: /node_modules/,
282+
aggregateTimeout: 400,
283+
poll: 1000,
284+
},
285+
286+
// Development server configuration
78287
devServer: {
79-
// watchFiles: path.join(__dirname, 'src'),
80-
// port: 9000,
81-
historyApiFallback: true,
82-
proxy: {
83-
"/": {
84-
target: "http://localhost",
85-
changeOrigin: true,
86-
},
87-
},
88-
static: {
89-
directory: path.join(__dirname, "dist"),
90-
serveIndex: true,
91-
},
92-
watchFiles: {
93-
paths: ["src/**/**/*.*"],
94-
options: {
95-
usePolling: true,
96-
},
288+
static: path.join(__dirname, "dist"),
289+
historyApiFallback: {
290+
rewrites: [{ from: /.*/, to: "/index.html" }],
97291
},
292+
compress: true,
293+
port: 9000,
294+
open: true,
295+
hot: true,
98296
},
99297
};

0 commit comments

Comments
 (0)