Cheatsheet - Work in progress! Please come back later!

Table of Contents:

Webpack

WIP

Webpack

Commands

Show your npm version:

npm -v

Install packages:

npm install

Start the watcher:

npm run watch

Build the files:

npm run build

JavaScript

Import SCSS/CSS:

import "./myStyles.scss";

Import a JS file:

import "./myFolder/myFile";

Import functions from a JS file:

import { doSomething } from "./myFolder/myFile";

Exporting a function:

export function doSomething(para1, para2) {
  ...
};

export const doSomething = (para1, para2) => {
  ...
};

CSS/SCSS

Importing a CSS file:

@import "./myFolder/myFile";

SCSS Variables:

$variable1: 123px;
$variable2: "example";
$variable3: #fff;

width: $variable1;

@media (min-width: $variable1) {
  ...
}

SCSS Mixins:

@mixin exampleMixin($width: 50px) {
  width: $width;
  color: red;
}

.example {
  @include exampleMixin(100px);
}

SCSS nesting:
("&" refers to the current selector, in this example "h1")

h1 {
  font-weight: bold;
  b {
    color: red;
  }
  &:hover {
    text-decoration: underline;
  }
  & + h2 {
    margin-top: 0;
  }
}

becomes:

h1 {
  font-weight: bold;
}
h1 b {
  color: red;
}
h1:hover {
  text-decoration: underline;
}
h1 + h2 {
  margin-top: 0;
}

Example Webpack Configuration

webpack.config.js

const path = require("path");

module.exports = {
  mode: "development",
  entry: "./js/main.js",
  output: {
    path: path.resolve(__dirname, "."),
    filename: "public/main.js",
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      //   {
      //     test: /\.(png|svg|jpg|jpeg|gif)$/i,
      //     type: "asset/resource",
      //   },
    ],
  },
};

package.json

{
  "name": "yourprojectname",
  "private": true,
  "dependencies": {},
  "devDependencies": {
    "css-loader": "^3.5.3",
    "file-loader": "^6.2.0",
    "node-sass": "^4.14.1",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.2.1",
    "url-loader": "^4.1.1",
    "webpack": "^4.47.0",
    "webpack-cli": "^3.3.11"
  },
  "scripts": {
    "watch": "webpack --watch",
    "build": "webpack"
  }
}

Don't forget to run npm install whenever you update your dependencies in this file!