87 lines (72 loc) · 2.11 KB

Webpack

📓 Webpack Guide

mkdir new-site
cd new-site

run npm init -y in the project directory to generate a package.json file
run npm install webpack webpack-cli --save-dev to install webpack to the node_modules directory of your project
Add a .gitignore file to your project and add node_modules/: echo node_modules/ >> .gitignore
Create a webpack.config.js file (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'),
  },
  mode: 'development' };

OPTIONAL Add a README.md file: echo # New Site Title >> README.md

Create a src and dist directory: mkdir src dist

An index.js file in src

cd src
echo alert('Congratulations'); >> index.js

An index.html file in dist

cd..
cd dist
echo "" >> index.html
echo "" >> style.css

Directory Structure

+---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.js file in a script tag <script src="main.js"></script> in dist\index.html
Your dist\index.html should 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.js is the file that will be generated by webpack, 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

Additional steps to take when deploying a subfolder to Github Pages:

git add dist && git commit -m "Initial dist subtree commit"
git subtree push --prefix dist origin gh-pages