Merge pull request #67 from bstaruk/develop

3.1.0

README.md

@@ -50,7 +50,7 @@ npm run build
 ## features you may want to remove
 
 ### asset hashing
-The assets generated by starbase are [hashed](https://webpack.js.org/guides/caching/) (strings injected into the filenames) as a cache-busting mechanism. JS and CSS assets will receive a new filename for each production build, but other assets (fonts, images, etc) will only be updated when they are modified.
+The assets generated by starbase are [hashed](https://webpack.js.org/guides/caching/) (strings injected into the filenames) as a cache-busting mechanism. Hashes are generated based on file contents so they will only change when the files themselves have changed -- so caching won't be broken entirely.
 
 This feature ships with webpack (and the loaders we use), so removing it is pretty straightforward. Simply open up the webpack config files and remove the hashes from the filenames, which should look something like this: `.[hash:8]`.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "starbase",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "author": "Brian Staruk <[email protected]>",
   "contributors": [
     {
@@ -24,20 +24,19 @@
   },
   "main": "index.js",
   "scripts": {
-    "build": "cross-env NODE_ENV=production webpack --config ./webpack/webpack.config.prod.js",
-    "start": "cross-env NODE_ENV=develop webpack serve --config ./webpack/webpack.config.dev.js"
+    "build": "NODE_ENV=production npx webpack --config ./webpack/webpack.config.prod.js",
+    "start": "NODE_ENV=develop npx webpack serve --config ./webpack/webpack.config.dev.js"
   },
   "keywords": [],
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.14.8",
-    "@babel/preset-env": "^7.14.8",
+    "@babel/core": "^7.15.0",
+    "@babel/preset-env": "^7.15.0",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
     "clean-webpack-plugin": "^3.0.0",
-    "cross-env": "^7.0.3",
     "css-loader": "^6.2.0",
-    "eslint": "^7.31.0",
+    "eslint": "^7.32.0",
     "eslint-config-airbnb-base": "^14.2.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-import-resolver-webpack": "^0.13.1",
@@ -46,7 +45,7 @@
     "eslint-plugin-prettier": "^3.4.0",
     "html-loader": "^2.1.2",
     "html-webpack-plugin": "^5.3.2",
-    "mini-css-extract-plugin": "^2.1.0",
+    "mini-css-extract-plugin": "^2.2.0",
     "node-sass": "^6.0.1",
     "path": "^0.12.7",
     "prettier": "^2.3.2",
@@ -55,7 +54,7 @@
     "stylelint": "^13.13.1",
     "stylelint-config-standard": "^22.0.0",
     "stylelint-webpack-plugin": "^3.0.1",
-    "webpack": "^5.47.0",
+    "webpack": "^5.48.0",
     "webpack-cli": "^4.7.2",
     "webpack-dev-server": "^3.11.2",
     "webpack-merge": "^5.8.0"

src/app.js

@@ -1,19 +1,17 @@
-// import * as OfflinePluginRuntime from 'offline-plugin/runtime';
-
-// fetch & promise polyfills (comment-out if not needed)
+// Dependency Imports
 import 'es6-promise/auto';
 import 'whatwg-fetch';
 
-// styles
+// Styles
 import 'app.scss';
 
-// js components
+// Scripts (Components)
 import RepoDetails from 'scripts/RepoDetails';
 
-// remove .no-js from html tag
+// Remove .no-js from html tag
 document.querySelector('html').classList.remove('no-js');
 
-// initialize RepoDetails component
+// Initialize RepoDetails component
 const repoDetailsWrapper = document.getElementById('repo-details');
 if (repoDetailsWrapper) {
   RepoDetails({ el: repoDetailsWrapper });

src/app.scss

@@ -1,9 +1,9 @@
-/* ordered css @imports */
-@import 'styles/fonts/fonts';
-@import 'styles/_variables';
+/* Ordered Imports */
+@import 'styles/fonts';
+@import 'styles/vars';
 @import 'styles/root';
 
-/* all other (alphabetical) css imports */
+/* Unordered Imports */
 @import 'styles/footer';
 @import 'styles/header';
 @import 'styles/heading';

src/templates/index.html → src/index.html

@@ -11,7 +11,7 @@
 <!-- header -->
 <header role="banner" class="header">
   <div class="header__brand">
-    <img src="images/starbase.png" alt="starbase logo" class="header__image" />
+    <img src="assets/starbase.png" alt="starbase logo" class="header__image" />
     <h1 class="header__title">starbase</h1>
   </div>
   <p>starbase is an open source website boilerplate built with <a class="link link--red" href="https://github.com/webpack/webpack" title="webpack on github">webpack 5</a>, modern JS (via <a class="link link--orange" href="https://github.com/babel/babel" title="babel on github">Babel</a>) &amp; <a class="link link--green" href="https://github.com/sass" title="sass on github">Sass</a>.

webpack/webpack.config.base.js

@@ -48,14 +48,16 @@ module.exports = {
         test: /\.(png|jpg|gif|svg)$/,
         type: 'asset/resource',
         generator: {
-          filename: 'images/[name]-[hash:8][ext]',
+          filename: devMode
+            ? 'images/[name][ext]'
+            : 'images/[name]-[hash:8][ext]',
         },
       },
       {
         test: /\.(woff|woff2|eot|ttf|otf)$/,
         type: 'asset/resource',
         generator: {
-          filename: 'fonts/[name]-[hash:8][ext]',
+          filename: 'fonts/[name][ext]',
         },
       },
     ],
@@ -67,9 +69,9 @@ module.exports = {
       chunkFilename: '[id]-[fullhash:8].css',
     }),
     new HtmlWebpackPlugin({
-      template: 'templates/index.html',
-      filename: 'index.html',
-      favicon: 'templates/images/favicon.png',
+      template: 'index.html', // Input
+      filename: 'index.html', // Output
+      favicon: 'assets/favicon.png',
     }),
   ],
 };