go to  ForumEasy.com   
JavaPro  
 
 
   Home  |  MyForum  |  FAQ  |  Archive    You are not logged in. [Login] or [Register]  
Forum Home » JavaScript » Webpack
Email To Friend  |   Set Alert To This Topic Rewarding Points Availabe: 0 (What's this) New Topic  |   Post Reply
Author Topic: Webpack
WebSpider
member
offline   
 
posts: 147
joined: 06/29/2006
from: Seattle, WA
  posted on: 04/22/2021 10:35:58 PM    Edit  |   Quote  |   Report 
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.
 Profile | Reply Points Earned: 0
WebSpider
member
offline   
 
posts: 147
joined: 06/29/2006
from: Seattle, WA
  posted on: 04/22/2021 10:38:13 PM    Edit  |   Quote  |   Report 
Prerequires
  • Download NodeJS[/b and install it
  • System's PATH should contain C:\Program Files\nodejs
  •  Profile | Reply Points Earned: 0
    WebSpider
    member
    offline   
     
    posts: 147
    joined: 06/29/2006
    from: Seattle, WA
      posted on: 04/22/2021 10:40:03 PM    Edit  |   Quote  |   Report 
    Why do you need Webpack?
  • Dependence mess
  • Too many files

  •  Profile | Reply Points Earned: 0
    WebSpider
    member
    offline   
     
    posts: 147
    joined: 06/29/2006
    from: Seattle, WA
      posted on: 04/22/2021 10:42:01 PM    Edit  |   Quote  |   Report 
    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.
     Profile | Reply Points Earned: 0
    WebSpider
    member
    offline   
     
    posts: 147
    joined: 06/29/2006
    from: Seattle, WA
      posted on: 04/22/2021 11:31:57 PM    Edit  |   Quote  |   Report 
    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"
      }
    }
    

     Profile | Reply Points Earned: 0
    WebSpider
    member
    offline   
     
    posts: 147
    joined: 06/29/2006
    from: Seattle, WA
      posted on: 04/22/2021 11:42:40 PM    Edit  |   Quote  |   Report 
    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>
    

     Profile | Reply Points Earned: 0
    WebSpider
    member
    offline   
     
    posts: 147
    joined: 06/29/2006
    from: Seattle, WA
      posted on: 04/22/2021 11:51:59 PM    Edit  |   Quote  |   Report 
    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
    
    
     Profile | Reply Points Earned: 0
    WebSpider
    member
    offline   
     
    posts: 147
    joined: 06/29/2006
    from: Seattle, WA
      posted on: 04/23/2021 04:15:20 AM    Edit  |   Quote  |   Report 
    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
     Profile | Reply Points Earned: 0

     
    Powered by ForumEasy © 2003-2005, All Rights Reserved. | Privacy Policy | Terms of Use
     
    Get your own forum today. It's easy and free.