Skip to content

Commit 7554e82

Browse files
manudousmanudous
authored
Merge pull request #818 from Lemoncode/feature/review-webpack-edition-XVIII
Feature/review webpack edition xviii
2 parents 2a6ceb6 + 388492d commit 7554e82

34 files changed

Lines changed: 345 additions & 287 deletions

File tree

‎03-bundling/01-webpack/01-zero-config/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"author": "",
1111
"license": "ISC",
1212
"devDependencies": {
13-
"webpack": "^5.72.1",
14-
"webpack-cli": "^4.9.2"
13+
"webpack": "^5.100.0",
14+
"webpack-cli": "^6.0.1"
1515
}
1616
}

‎03-bundling/01-webpack/02-boiler-plate/README.md‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -116,10 +116,12 @@ _./src/students.js_
116116

117117
```javascript
118118
// Usemos algunas características de ES6
119-
const averageScore = "90";
120-
const messageToDisplay = `average score ${averageScore}`;
119+
const randomNumber = Math.random() * 100;
120+
const messageToDisplay = `random number is ${randomNumber}`;
121121

122-
document.write(messageToDisplay);
122+
const messageElement = document.createElement("p");
123+
messageElement.textContent = messageToDisplay;
124+
document.body.appendChild(messageElement);
123125
```
124126

125127
- Vamos a saltar a la configuración de _webpack_, creamos un fichero de configuración que llamaremos **`webpack.config.js`**, e indicamos el punto de entrada: apuntamos al fichero _js_ que hemos creado justo en el paso anterior,
@@ -191,16 +193,15 @@ _./dist/main.js_
191193

192194
```javascript
193195
...
194-
/***/ "./students.js":
195-
/*!*********************!*\
196-
!*** ./students.js ***!
197-
\*********************/
198-
/*! no static exports found */
199-
/***/ (function(module, exports) {
196+
/***/ "./src/students.js":
197+
/*!*************************!*\
198+
!*** ./src/students.js ***!
199+
\*************************/
200+
/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
200201

201-
eval("var averageScore = \"90\";\nvar messageToDisplay = \"average score \".concat(averageScore);\ndocument.write(messageToDisplay);\n\n//# sourceURL=webpack:///./students.js?");
202+
eval("{__webpack_require__.r(__webpack_exports__);\n// Usemos algunas características de ES6\nvar randomNumber = Math.random() * 100;\nvar messageToDisplay = \"random number is \".concat(randomNumber);\nvar messageElement = document.createElement(\"p\");\nmessageElement.textContent = messageToDisplay;\ndocument.body.appendChild(messageElement);\n\n//# sourceURL=webpack://02-boiler-plate/./src/students.js?\n}");
202203

203-
/***/ }),
204+
/***/ })
204205
...
205206
```
206207

‎03-bundling/01-webpack/02-boiler-plate/package.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@
1111
"author": "",
1212
"license": "ISC",
1313
"devDependencies": {
14-
"@babel/cli": "^7.23.0",
15-
"@babel/core": "^7.23.2",
16-
"@babel/preset-env": "^7.23.2",
17-
"babel-loader": "^9.1.3",
18-
"webpack": "^5.89.0",
19-
"webpack-cli": "^5.1.4"
14+
"@babel/cli": "^7.28.0",
15+
"@babel/core": "^7.28.0",
16+
"@babel/preset-env": "^7.28.0",
17+
"babel-loader": "^10.0.0",
18+
"webpack": "^5.100.0",
19+
"webpack-cli": "^6.0.1"
2020
}
2121
}

‎03-bundling/01-webpack/02-boiler-plate/src/students.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
// Usemos algunas características de ES6
2-
const averageScore = "90";
3-
const messageToDisplay = `average score ${averageScore}`;
2+
const randomNumber = Math.random() * 100;
3+
const messageToDisplay = `random number is ${randomNumber}`;
44

5-
document.write(messageToDisplay);
5+
const messageElement = document.createElement("p");
6+
messageElement.textContent = messageToDisplay;
7+
document.body.appendChild(messageElement);

‎03-bundling/01-webpack/03-import/README.md‎

Lines changed: 27 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -28,13 +28,17 @@ _./src/students.js_
2828
- // Usemos algunas características de ES6
2929
+ import { getAvg } from './averageService.js';
3030

31+
- const randomNumber = Math.random() * 100;
3132
+ const scores = [90, 75, 60, 99, 94, 30];
32-
- const averageScore = "90";
3333
+ const averageScore = getAvg(scores);
3434

35-
const messageToDisplay = `average score ${averageScore}`;
35+
- const messageToDisplay = `random number is ${randomNumber}`;
36+
+ const messageToDisplay = `average score ${averageScore}`;
3637

37-
document.write(messageToDisplay);
38+
39+
const messageElement = document.createElement("p");
40+
messageElement.textContent = messageToDisplay;
41+
document.body.appendChild(messageElement);
3842
```
3943

4044
- Por último, vamos a ejecutar _webpack_ desde el terminal ejecutando el siguiente comando:
@@ -78,7 +82,7 @@ function getTotalScore(scores) {
7882

7983
_./src/students.js_
8084

81-
````diff
85+
```diff
8286
- import {getAvg} from "./averageService.js";
8387
+ import getAvg from "./averageService.js";
8488

@@ -87,8 +91,10 @@ const averageScore = getAvg(scores);
8791

8892
const messageToDisplay = `average score ${averageScore}`;
8993

90-
document.write(messageToDisplay);
91-
````
94+
const messageElement = document.createElement("p");
95+
messageElement.textContent = messageToDisplay;
96+
document.body.appendChild(messageElement);
97+
```
9298

9399
### Múltiple named exports
94100

@@ -127,12 +133,16 @@ const averageScore = getAvg(scores);
127133
+ const totalScore = getTotalScore(scores);
128134

129135
- const messageToDisplay = `average score ${averageScore}`;
130-
+ const messageToDisplayAvg = `average score ${averageScore} `;
136+
+ const messageToDisplayAvg = `average score ${averageScore}`;
131137
+ const messageToDisplayTotal = `total score ${totalScore}`;
132138

133-
- document.write(messageToDisplay);
134-
+ document.write(messageToDisplayAvg);
135-
+ document.write(messageToDisplayTotal);
139+
const messageElement = document.createElement("p");
140+
- messageElement.textContent = messageToDisplay;
141+
+ messageElement.textContent = messageToDisplayAvg;
142+
143+
+ const totalElement = document.createElement("p");
144+
+ totalElement.textContent = messageToDisplayTotal;
145+
+ document.body.appendChild(totalElement);
136146
```
137147

138148
- Importa el contenido de todo el módulo usando el comodín `*` y un _name_ para nuestro módulo. Este _name_ contendrá todos los elementos exportados en nuestro ámbito actual (se utiliza _name_ como espacio de nombres):
@@ -152,8 +162,13 @@ const scores = [90, 75, 60, 99, 94, 30];
152162
const messageToDisplayAvg = `average score ${averageScore} `;
153163
const messageToDisplayTotal = `total score ${totalScore}`;
154164

155-
document.write(messageToDisplayAvg);
156-
document.write(messageToDisplayTotal);
165+
const messageElement = document.createElement("p");
166+
messageElement.textContent = messageToDisplayAvg;
167+
document.body.appendChild(messageElement);
168+
169+
const totalElement = document.createElement("p");
170+
totalElement.textContent = messageToDisplayTotal;
171+
document.body.appendChild(totalElement);
157172
```
158173

159174
# ¿Te apuntas a nuestro máster?

‎03-bundling/01-webpack/03-import/package.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@
1111
"author": "",
1212
"license": "ISC",
1313
"devDependencies": {
14-
"@babel/cli": "^7.23.0",
15-
"@babel/core": "^7.23.2",
16-
"@babel/preset-env": "^7.23.2",
17-
"babel-loader": "^9.1.3",
18-
"webpack": "^5.89.0",
19-
"webpack-cli": "^5.1.4"
14+
"@babel/cli": "^7.28.0",
15+
"@babel/core": "^7.28.0",
16+
"@babel/preset-env": "^7.28.0",
17+
"babel-loader": "^10.0.0",
18+
"webpack": "^5.100.0",
19+
"webpack-cli": "^6.0.1"
2020
}
2121
}

‎03-bundling/01-webpack/03-import/src/students.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,10 @@ const totalScore = averageService.getTotalScore(scores);
77
const messageToDisplayAvg = `average score ${averageScore} `;
88
const messageToDisplayTotal = `total score ${totalScore}`;
99

10-
document.write(messageToDisplayAvg);
11-
document.write(messageToDisplayTotal);
10+
const messageElement = document.createElement("p");
11+
messageElement.textContent = messageToDisplayAvg;
12+
document.body.appendChild(messageElement);
13+
14+
const totalElement = document.createElement("p");
15+
totalElement.textContent = messageToDisplayTotal;
16+
document.body.appendChild(totalElement);

‎03-bundling/01-webpack/04-server/package.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,12 @@
1212
"author": "",
1313
"license": "ISC",
1414
"devDependencies": {
15-
"@babel/cli": "^7.23.0",
16-
"@babel/core": "^7.23.2",
17-
"@babel/preset-env": "^7.23.2",
18-
"babel-loader": "^9.1.3",
19-
"webpack": "^5.89.0",
20-
"webpack-cli": "^5.1.4",
21-
"webpack-dev-server": "^4.15.1"
15+
"@babel/cli": "^7.28.0",
16+
"@babel/core": "^7.28.0",
17+
"@babel/preset-env": "^7.28.0",
18+
"babel-loader": "^10.0.0",
19+
"webpack": "^5.100.0",
20+
"webpack-cli": "^6.0.1",
21+
"webpack-dev-server": "^5.2.2"
2222
}
2323
}

‎03-bundling/01-webpack/04-server/src/students.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,10 @@ const totalScore = averageService.getTotalScore(scores);
77
const messageToDisplayAvg = `average score ${averageScore} `;
88
const messageToDisplayTotal = `total score ${totalScore}`;
99

10-
document.write(messageToDisplayAvg);
11-
document.write(messageToDisplayTotal);
10+
const messageElement = document.createElement("p");
11+
messageElement.textContent = messageToDisplayAvg;
12+
document.body.appendChild(messageElement);
13+
14+
const totalElement = document.createElement("p");
15+
totalElement.textContent = messageToDisplayTotal;
16+
document.body.appendChild(totalElement);

‎03-bundling/01-webpack/05-output/package.json‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,13 @@
1212
"author": "",
1313
"license": "ISC",
1414
"devDependencies": {
15-
"@babel/cli": "^7.23.0",
16-
"@babel/core": "^7.23.2",
17-
"@babel/preset-env": "^7.23.2",
18-
"babel-loader": "^9.1.3",
19-
"html-webpack-plugin": "^5.5.3",
20-
"webpack": "^5.89.0",
21-
"webpack-cli": "^5.1.4",
22-
"webpack-dev-server": "^4.15.1"
15+
"@babel/cli": "^7.28.0",
16+
"@babel/core": "^7.28.0",
17+
"@babel/preset-env": "^7.28.0",
18+
"babel-loader": "^10.0.0",
19+
"html-webpack-plugin": "^5.6.3",
20+
"webpack": "^5.100.0",
21+
"webpack-cli": "^6.0.1",
22+
"webpack-dev-server": "^5.2.2"
2323
}
2424
}

0 commit comments

Comments
 (0)