add node_modules
to .gitignore
create project & install webpack
npm init -y
npm install -d webpack-cli
execute webpack, create src/index.js and index.html
./node_modules/.bin/webpack
(error because no src is found)
mkdir src
touch src/index.js
edit index.js
function main() {
console.log('main');
}
main();
execute webpack
./node_modules/.bin/webpack
look at ./dist/main.js
console.log("main");
(code is minified)
add /dist
to .gitignore
, add script
to package.json
npm run build
add an index.html
touch ./index.html
edit index.html
<html>
<head>
</head>
<body>
<script type="text/javascript" src="./dist/main.js"></script>
</body>
</html>
start a local server
python -m SimpleHTTPServer
open http://0.0.0.0:8000 and open the development console
examine the network activity and console output
touch src/module1.js
// src/module1.js
export function greet(name) {
console.log(`Hello ${name}!`);
}
// src/index.js
import { greet } from './module1.js';
function main() {
console.log('main');
}
main();
npm run build
look at ./dist/main.js
(()=>{"use strict";console.log("main")})();
🤔 because of webpack dead code elimination
// src/index.js
import { greet } from './module1.js';
function main() {
console.log('main');
greet('javi');
}
main();
look at ./dist/main.js
(()=>{"use strict";console.log("main"),console.log("Hello javi!")})();
// src/index.js
import { greet } from './module1.js';
function main() {
console.log('main');
greet('javi');
greet('carlos');
}
main();
look at ./dist/main.js
(()=>{"use strict";function o(o){console.log(`Hello ${o}!`)}console.log("main"),o("javi"),o("carlos")})();
edit index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="./src/style.css">
</head>
<body>
<div>
html content here!
</div>
<script type="text/javascript" src="./dist/main.js"></script>
</body>
</html>
body {
color: white;
font-size: 100px;
background: green;
}
edit index.html
<html>
<head>
</head>
<body>
<div>
html content here!
</div>
<script type="text/javascript" src="./dist/main.js"></script>
</body>
</html>
edit ./src/index.js
import { greet } from './module1.js';
import './style.css';
function main() {
console.log('main');
greet('javi');
greet('carlos');
}
main();
npm run build
❌ error
install webpack loaders and configure webpack
npm install -d css-loader style-loader
edit webpack.config.js
module.exports = {
module: {
rules: [
{ test: /\.css$/, use: ['style-loader','css-loader'] },
]
},
mode: 'development',
}
npm install -d css-loader style-loader
npm run build
webpack adds some javascript code to inject the styles in the DOM after the HTML & JS code has been loaded and parsed (see main.js ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js)
our js code is still there in main.js
but it is more and more difficult to recognize
npm install -d webpack-dev-server
add the serve
script
{
"name": "demo-webpack",
"version": "1.0.0",
"description": "add node_modules to .gitignore",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"serve": "webpack serve"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"css-loader": "^6.7.1",
"style-loader": "^3.3.1",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.9.3"
}
}
move index.html
to public
folder and adjust reference to main.js
also, add an input box
<html>
<head>
</head>
<body>
<div>
html content here!
</div>
<input type="text" name="field" />
<script type="text/javascript" src="./main.js"></script>
</body>
</html>
type some text in the input box
change color in styles.css
-> HMR replaces the module without reloading (input state is preserved)
change something in the HTML file -> reloads the HTML (input state is lost)