Restaurant Page - Odin Project
🍕 Live Project 👉 here
mkdir new-site
cd new-site- run
npm init -yin the project directory to generate apackage.jsonfile - run
npm install webpack webpack-cli --save-devto install webpack to thenode_modulesdirectory of your project - Add a
.gitignorefile to your project and addnode_modules/:echo node_modules/ >> .gitignore - Create a
webpack.config.jsfile (echo "config here" >> webpack.config.js) that looks this:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
};OPTIONAL Add a README.md file: echo # New Site Title >> README.md
- Create a
srcanddistdirectory:mkdir src dist
- An
index.jsfile insrc
cd src
echo alert('Congratulations'); >> index.js- An
index.htmlfile indist
cd..
cd dist
echo "" >> index.html
echo "" >> style.css+---dist
| | index.html
| | main.js
| | style.css
+---node_modules
+---src
| | index.js
| | module01.js
+---.gitignore
+---package-lock.json
+---package.json
/---webpack.config.js- Link the
main.jsfile in a script tag<script src="main.js"></script>indist\index.html - Your
dist\index.htmlshould look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>New Site Title</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>FYI
main.jsis the file that will be generated bywebpack, do not touch this file!
- run
npx webpack
Hot Tip 🔥: if you run
npx webpack --watch, you will not have to rerun webpack every time you make a change
git add dist && git commit -m "Initial dist subtree commit"git subtree push --prefix dist origin gh-pages