Skip to content

Commit b1438f8

Browse files
NickbahsonNickbahson
committed
added webpack bundler
1 parent 298607a commit b1438f8

18 files changed

+5292
-18
lines changed

‎.browserslistrc

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
last 2 versions
2+
> 0.5%

‎.gitignore

+8-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
11
.idea/
22
vendor/
3-
.env
3+
.env
4+
node_modules/
5+
dist/
6+
.yarn/
7+
8+
#Log files
9+
.pnp.cjs
10+
.pnp.loader.mjs

‎README.md

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# a_web
2+
#Code for blog
3+
## Improving developer experience as well as front-end performance with webpack
4+
5+
Blog at@
6+
Dev.to: https://dev.to/nickbahson/improving-developer-experience-as-well-as-front-end-performance-with-webpack-2bke
7+
8+
OR: https://www.flaircore.com/blog/improving-developer-experience-well-front-end-performance-webpack
9+
10+
Live unoptimized app @ https://pure-headland-11901.herokuapp.com/
11+
12+
Live optimized app @ https://webpack-optimized.herokuapp.com/

‎babel.config.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
module.exports = {
2+
presets: [
3+
[
4+
"@babel/preset-env",
5+
{debug: true, useBuiltIns: "usage", corejs: 3},
6+
]
7+
],
8+
plugins: [
9+
"@babel/plugin-transform-runtime",
10+
],
11+
}

‎index.php

+57-17
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,91 @@
11
<?php
22
$upload_dir = __DIR__ . '/uploads/';
3+
4+
if (isset($_FILES["fileUpload"])) {
5+
6+
// Get file path
7+
$target_file = $upload_dir. basename($_FILES["fileUpload"]["name"]);
8+
9+
$saved = move_uploaded_file($_FILES["fileUpload"]["tmp_name"], $target_file);
10+
11+
$data = array("Saved" => $saved ,"Mango"=>95, "Cherry"=>120, "Kiwi"=>100, "Orange"=>55);
12+
13+
header('Content-Type: application/json');
14+
echo json_encode($data);
15+
exit();
16+
17+
}
318
?>
19+
<!doctype html>
20+
<html lang="en">
21+
<head>
22+
<meta charset="UTF-8">
23+
<meta name="viewport"
24+
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
25+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
26+
<link rel="stylesheet" href="dist/main.css">
27+
<title>A Web exp.!</title>
28+
</head>
29+
<body class="content-fluid">
30+
<header>
31+
32+
</header>
433
<div>
534

635
<form action="" method="post" enctype="multipart/form-data" class="mb-3">
736
<h3 class="text-center mb-5">Upload File in PHP 8</h3>
837
<div class="custom-file">
938
<input type="file" name="fileUpload" class="custom-file-input" id="fileUpload">
1039
<label class="custom-file-label" for="chooseFile">Select file</label>
40+
<section id="custom-file-upload-progress">
41+
<div id="progress-bar">
42+
<div id="progress">Progress</div>
43+
<div id="percent">50%</div>
44+
</div>
45+
</section>
1146
</div>
1247
<button type="button" name="ajax_upload" class="btn btn-primary btn-block mt-4" onclick="saveDocumentToS3()">
1348
Ajax upload
1449
</button>
1550

16-
</form><script>
51+
<!-- <button type="button" name="select-file" id="select-file">-->
52+
<!-- Select file-->
53+
<!-- </button>-->
54+
55+
</form>
56+
<script src="dist/main.bundle.js"></script>
57+
<script>
1758

1859
async function saveDocumentToS3() {
1960
const currentUrl = window.location.href
2061
let formData = new FormData()
2162
formData.append("fileUpload", fileUpload.files[0])
22-
const uploadRequest = await fetch(currentUrl, {
63+
const response = await fetch(currentUrl, {
2364
method: "POST",
2465
body: formData
2566
})
2667

68+
if (!response.ok) {
69+
throw new Error(`HTTP error! status: ${response.status}`);
70+
}
2771

28-
const data = await uploadRequest.json()
72+
const data = await response.json()
2973

74+
console.log(data)
3075

31-
}
32-
33-
</script>
3476

3577

36-
</div>
37-
<?php
38-
if(isset($_FILES["fileUpload"])) {
3978

40-
// Get file path
41-
$target_file = $upload_dir. basename($_FILES["fileUpload"]["name"]);
79+
}
4280

43-
$saved = move_uploaded_file($_FILES["fileUpload"]["tmp_name"], $target_file);
81+
</script>
4482

45-
$data = array("saved" => $saved,"a" => "Apple", "b" => "Ball", "c" => "Cat");
4683

47-
header("Content-Type: application/json");
48-
echo json_encode($data);
49-
exit();
84+
</div>
85+
<footer>
86+
Copyright@2023 FlairCore.com
87+
</footer>
5088

51-
}
89+
</body>
90+
</html>
91+
<?php

‎package.json

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
{
2+
"name": "a_web",
3+
"version": "1.0.0",
4+
"description": "A webpack project to demonstrate better FE performance and developer experience",
5+
"main": "index.js",
6+
"keywords": [
7+
"webpack",
8+
"babel",
9+
"polyfill",
10+
"front end performance"
11+
],
12+
"repository": "https://github.com/flaircore/a_web.git",
13+
"author": "Nickbahson <[email protected]> (https://flaircore.com/)",
14+
"license": "MIT",
15+
"scripts": {
16+
"build-dev": "webpack",
17+
"watch": "webpack --watch --progress",
18+
"build": "cross-env NODE_ENV=production webpack"
19+
},
20+
"devDependencies": {
21+
"@babel/core": "^7.17.9",
22+
"@babel/plugin-transform-runtime": "^7.19.6",
23+
"@babel/preset-env": "^7.16.11",
24+
"@popperjs/core": "^2.11.5",
25+
"@squoosh/lib": "^0.4.0",
26+
"babel-loader": "^8.2.5",
27+
"cross-env": "^7.0.3",
28+
"css-loader": "^6.7.1",
29+
"mini-css-extract-plugin": "^2.6.0",
30+
"postcss": "^8.4.12",
31+
"postcss-loader": "^6.2.1",
32+
"postcss-preset-env": "^7.4.3",
33+
"sass": "^1.49.11",
34+
"sass-loader": "^12.6.0",
35+
"webpack": "^5.72.1",
36+
"webpack-cli": "^4.9.2"
37+
},
38+
"dependencies": {
39+
"@babel/runtime": "^7.20.13",
40+
"axios": "^1.3.1",
41+
"core-js": "^3.22.4"
42+
}
43+
}

‎postcss.config.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
plugins: ["postcss-preset-env"]
3+
}

‎src/AwsS3Client.php

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<?php
2+
3+
namespace Nick\PhpStreams;
4+
5+
class AwsS3Client {
6+
7+
}

‎src_js/main.js

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import axios, {isCancel, AxiosError} from 'axios';
2+
3+
4+
import "./main.scss"
5+
6+
(function ( ){
7+
8+
const file = document.querySelector('input#fileUpload')
9+
file.addEventListener('change', readFileToUpload)
10+
async function readFileToUpload() {
11+
const file = this.files[0]
12+
console.log(file)
13+
14+
const reader = new FileReader()
15+
16+
reader.onload = function (){
17+
console.log(this.result)
18+
}
19+
20+
reader.readAsArrayBuffer(file)
21+
//reader.readAsText(file)
22+
23+
}
24+
25+
26+
// axios.request({
27+
// method: "post",
28+
// url: "/aaa",
29+
// data: myData,
30+
// onUploadProgress: (p) => {
31+
// console.log(p);
32+
// //this.setState({
33+
// //fileprogress: p.loaded / p.total
34+
// //})
35+
// }
36+
// }).then (data => {
37+
// //this.setState({
38+
// //fileprogress: 1.0,
39+
// //})
40+
// })
41+
42+
})()

‎src_js/main.scss

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.custom-file {
2+
3+
#custom-file-upload-progress #progress-bar {
4+
border: 2px dashed #30412b;
5+
display: grid;
6+
grid-template-columns: repeat(8, 1fr);
7+
}
8+
}

‎uploads/Screenshot from 2023-01-30 09-02-24.png

85.3 KB
Loading

‎uploads/Screenshot from 2023-01-30 11-33-23.png

183 KB
Loading

‎uploads/Selection_001.png

199 KB
Loading

‎uploads/photo_2023-01-27_08-24-58.jpg

84.8 KB
Loading

‎uploads/photo_2023-01-27_08-25-08.jpg

114 KB
Loading

‎uploads/test_dev_credentials.csv

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
User name,Password,Console sign-in URL
2+
test_dev,NamB5]2z,https://103618511149.signin.aws.amazon.com/console

‎webpack.config.js

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
const MiniCSSExtractPlugin = require("mini-css-extract-plugin")
2+
const path = require("path")
3+
4+
let mode = "development",
5+
source_map = "source-map"
6+
7+
// if NODE_ENV is set to prod, we disable source-maps,
8+
// and set webpack mode is production for it to use
9+
// its built in optimizations accordingly eg minified/optimized
10+
// files.
11+
if (process.env.NODE_ENV === "production") {
12+
mode = "production"
13+
source_map = "eval"
14+
}
15+
16+
module.exports = {
17+
mode: mode,
18+
target: ["web", 'es5'],
19+
/**
20+
* entries for raw js files (source)
21+
*/
22+
entry: {
23+
main: path.resolve(__dirname, 'src_js/main.js'),
24+
},
25+
/**
26+
* output folder,
27+
* where [name] === entry[name]/entry[i] from above
28+
*/
29+
output: {
30+
filename: '[name].bundle.js',
31+
path: path.resolve(__dirname, 'dist'),
32+
// clean: true; cleans the output folder from previous builds.
33+
clean: true,
34+
},
35+
36+
/**
37+
* devtools controls if and how source maps are generated.
38+
*/
39+
devtool: source_map,
40+
41+
/**
42+
* https://webpack.js.org/configuration/plugins/
43+
*/
44+
plugins: [
45+
new MiniCSSExtractPlugin()
46+
],
47+
48+
/**
49+
* https://webpack.js.org/configuration/module/#rule
50+
*/
51+
module: {
52+
rules: [
53+
{
54+
test: /\.(sc|c)ss$/i,
55+
/**
56+
* postcss-loader (postcss.config.js),
57+
* css-loader and
58+
* finally we extract css to
59+
* a separate file with MiniCSSExtractPlugin.loader plugin.
60+
* Another option, is to use style-loader to inject inline css into
61+
* our template files but we don't need that approach.
62+
*/
63+
use:[
64+
MiniCSSExtractPlugin.loader,
65+
"css-loader",
66+
/**
67+
* postcss-loader (postcss.config.js)
68+
*/
69+
"postcss-loader",
70+
"sass-loader"
71+
]
72+
},
73+
{
74+
test: /\.js$/i,
75+
exclude: /node_modules/,
76+
/**
77+
* babel-loader (babel.config.js)
78+
*/
79+
use: [
80+
"babel-loader"
81+
]
82+
},
83+
{
84+
test: /\.(png|jpe?g|gif|svg)$/i,
85+
type: "asset"
86+
},
87+
]
88+
},
89+
}

0 commit comments

Comments
 (0)