| |
How to config Webpack |
|
|
Subject: How to config Webpack
Author: WebSpider
In response to: Installation
Posted on: 04/22/2021 11:42:40 PM
[+] hello-w-webpack
|.. [+] src
|....... game.js
|....... main.js
|.. [+] public
|....... index.html
|....... style.css
|.. package.json
|.. 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
}
};
{
"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"
}
}
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;
import click from './game'
const button = document.getElementById('button');
button.addEventListener('click', function() {
click();
});
<!DOCTYPE html>
<html lang="en">
<head>
<script src="./bundle.js"></script>
</head>
<body>
<button id="button">Click Me!</button>
</body>
</html>
>
> On 04/22/2021 11:31:57 PM WebSpider wrote:
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"
}
}
References:
|
|
|
|
