Installation

Subject: Installation
Author: WebSpider
In response to: What's the problem?
Posted on: 04/22/2021 11:31:57 PM

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"
  }
}

>
> On 04/22/2021 10:42:01 PM WebSpider wrote:

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>  <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.

References:

Next Post: How to config Webpack WebSpider 04/22/2021 11:42:40 PM
Previous Post: What's the problem? WebSpider 04/22/2021 10:42:01 PM
Next Topic: Smart Contract --I: Coding & Compilation via Remix WebSpider 06/07/2021 06:44:36 AM
Previous Topic: NPM Scripts WebSpider 04/22/2021 09:55:59 PM
Index: by Date
Index: by Topic