|
|
WebSpider
member
offline  |
| |
| posts: |
147 |
| joined: |
06/29/2006 |
| from: |
Seattle, WA |
|
|
 |
|
|
| Webpack |
Webpack is a module bundler. Its purpose is to process your application by tracking down its dependencies, then bundle them all up into one or more files, which can be loaded efficiently.
|
|
|
|
|
|
|
WebSpider
member
offline  |
| |
| posts: |
147 |
| joined: |
06/29/2006 |
| from: |
Seattle, WA |
|
|
|
|
|
| Prerequires |
Download NodeJS[/b and install it
System's PATH should contain C:\Program Files\nodejs
|
|
|
|
|
|
|
WebSpider
member
offline |
| |
| posts: |
147 |
| joined: |
06/29/2006 |
| from: |
Seattle, WA |
|
|
|
|
|
| Why do you need Webpack? |
Dependence mess
Too many files
|
|
|
|
|
|
|
WebSpider
member
offline |
| |
| posts: |
147 |
| joined: |
06/29/2006 |
| from: |
Seattle, WA |
|
|
|
|
|
| What's the problem? |
Let's take a look at the dependence problem:
[+] hello-wo-webpack
|.. [+] src
|....... game.js
|....... main.js
|.. [+] public
|....... index.html
|....... style.css
game.js:
let numTimesClicked = 0;
function win() {
alert('You win!');
reset();
}
function reset() {
numTimesClicked = 0;
}
function click() {
numTimesClicked++;
console.log(`You've been clicked!`);
if (numTimesClicked === 3)
win();
}
main.js
const button = document.getElementById('button');
button.addEventListener('click', function() {
click();
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 'defer' should be present, otherwise Uncaught TypeError -->
<script src="../src/main.js"></script>
<script src="../src/game.js"></script>
</head>
<body>
<button id="button">Click Me!</button>
</body>
</html>
Here, main.js depends on game.js for click function which is not available -- resulting in Uncaught TypeError.
|
|
|
|
|
|
|
WebSpider
member
offline |
| |
| posts: |
147 |
| joined: |
06/29/2006 |
| from: |
Seattle, WA |
|
|
|
|
|
| Installation |
c:\tmp\webpack\hello-w-webpack>npm init -y
c:\tmp\webpack\hello-w-webpack>npm install --save-dev webpack webpack-cli
package.json:
{
"name": "hello-w-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.35.0",
"webpack-cli": "^4.6.0"
}
}
|
|
|
|
|
|
|
WebSpider
member
offline |
| |
| posts: |
147 |
| joined: |
06/29/2006 |
| from: |
Seattle, WA |
|
|
|
|
|
| How to config Webpack |
[+] hello-w-webpack
|.. [+] src
|....... game.js
|....... main.js
|.. [+] public
|....... index.html
|....... style.css
|.. package.json
|.. webpack.config.js
webpack.config.js
const path = require('path');
module.exports = {
mode: "development", // could be "production" as well
entry: './src/main.js', // the starting point for our program
output: {
path: path.resolve(__dirname, 'public'), // the absolute path for the directory where we want the output to be placed
filename: 'bundle.js' // the name of the file that will contain our output - we could name this whatever we want, but bundle.js is typical
}
};
package.json
{
"name": "hello-w-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack -w" // to watch for files changes
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.35.0",
"webpack-cli": "^4.6.0"
}
}
game.js:
let numTimesClicked = 0;
function win() {
alert('You win!');
reset();
}
function reset() {
numTimesClicked = 0;
}
function click() {
numTimesClicked++;
console.log(`You've been clicked!`);
if (numTimesClicked === 3)
win();
}
export default click;
main.js
import click from './game'
const button = document.getElementById('button');
button.addEventListener('click', function() {
click();
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="./bundle.js"></script>
</head>
<body>
<button id="button">Click Me!</button>
</body>
</html>
|
|
|
|
|
|
|
WebSpider
member
offline |
| |
| posts: |
147 |
| joined: |
06/29/2006 |
| from: |
Seattle, WA |
|
|
|
|
|
| Webpack In Action |
c:\tmp\webpack\hello-w-webpack>npm run build
> hello-w-webpack@1.0.0 build C:\tmp\webpack\hello-w-webpack
> webpack -w
asset bundle.js 4.58 KiB [compared for emit] (name: main)
runtime modules 670 bytes 3 modules
cacheable modules 471 bytes
./src/main.js 147 bytes [built] [code generated]
./src/game.js 324 bytes [built] [code generated]
webpack 5.35.0 compiled successfully in 103 ms
The packed file 'bundle.js' should be shown under 'public'
[+] hello-w-webpack
|.. [+] src
|....... game.js
|....... main.js
|.. [+] public
|....... index.html
|....... bundle.js
|....... style.css
|.. package.json
|.. webpack.config.js
|
|
|
|
|
|
|
WebSpider
member
offline |
| |
| posts: |
147 |
| joined: |
06/29/2006 |
| from: |
Seattle, WA |
|
|
|
|
|
| Minify as bundle-min.js |
For large project with huge files, there is a need to minify those files to a single file like bundle.min.js for the purpose of fast loading. For details, please check the following links:
https://blog.logrocket.com/uglify-vs-babel-minify-vs-terser-a-mini-battle-royale/
https://github.com/facebook/create-react-app/issues/3365
|
|
|
|
|
|
|
|
Email To Friend | 
Set Alert To This Topic
New Topic | 
Post Reply 
posted on: 04/22/2021 10:35:58 PM
Edit
Quote
Report
Profile
Reply