feat: 🎸 switch from webpack to snowpack

loctran016 · Jun 23, 2021 · c1016be · c1016be
1 parent 05d261f
commit c1016be
Show file tree

Hide file tree

Showing 20 changed files with 2,683 additions and 1,993 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -5,7 +5,7 @@ module.exports = {
         es2021: true,
         node: true,
     },
-    extends: ['google'],
+    extends: ['standard'],
     parserOptions: {
         ecmaVersion: 12,
     },

diff --git a/.gitignore b/.gitignore
@@ -92,11 +92,13 @@ typings/
 # DynamoDB Local files
 .dynamodb/
 
-# Webpack
-.webpack/
-dist
-public
-src/_includes/webpack.ejs
+# Snowpack
+public/*
+!public/scripts/
+!public/styles/
+!public/main.css
+!public/index.js
+!public/images/*
 
 # Electron-Forge
 out/

diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/.idea/frontend-template.iml b/.idea/frontend-template.iml
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/README.md b/README.md
@@ -18,7 +18,7 @@
 [![Stargazers][stars-shield]][stars-url]
 [![Issues][issues-shield]][issues-url]
 [![MIT License][license-shield]][license-url]
-[![LinkedIn][linkedin-shield]][linkedin-url]
+[![js-standard-style](https://cdn.rawgit.com/standard/standard/master/badge.svg)](http://standardjs.com)
 
 <!-- PROJECT LOGO -->
 <br />
@@ -189,5 +189,3 @@ Project Link: [https://github.com/cokaps016/eleventy-kickstart-blog](https://git
 [issues-url]: https://github.com/cokaps016/eleventy-kickstart-blog/issues
 [license-shield]: https://img.shields.io/github/license/cokaps016/eleventy-kickstart-blog.svg?style=for-the-badge
 [license-url]: https://github.com/cokaps016/eleventy-kickstart-blog/blob/master/LICENSE.txt
-[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
-[linkedin-url]: https://linkedin.com/in/cokaps016
diff --git a/package.json b/package.json
@@ -23,16 +23,16 @@
         }
     },
     "scripts": {
-        "cz": "git add . && git-cz && git push origin main",
+        "cz": "git add . && git-cz && git push origin snowpack",
         "release": "bump-version",
         "postinstall": "husky install",
-        "lintci-stylelint": "echo Linting With Stylelint... && stylelint src/styles/**/*.css && echo Lint passed. || (echo Lint failed, attempting fix... && stylelint src/styles/**/*.css --fix && echo Fix generated successfully. || (echo Fix failed! && exit 1))",
+        "lintci-stylelint": "echo Linting With Stylelint... && stylelint public/styles/**/*.css && echo Lint passed. || (echo Lint failed, attempting fix... && stylelint public/styles/**/*.css --fix && echo Fix generated successfully. || (echo Fix failed! && exit 1))",
         "lintci-eslint": "echo Linting With Eslint... &&  yarn eslint --format github --ext .js --quiet && echo Lint passed. || (echo Lint failed, attempting fix... && yarn eslint --ext .js --fix --quiet && echo Fix generated successfully. || (echo Fix failed! && exit 1))",
         "lintci-prettier": "echo Linting With Prettier... && yarn prettier --check . && echo Lint passed. || (echo Lint failed, attempting fix... && yarn prettier -w . && echo Fix generated successfully. || (echo Fix failed! && exit 1))",
-        "lint-stylelint": "echo Linting With Stylelint... && stylelint src/styles/**/*.css && echo Lint passed. || (echo Lint failed && exit 1)",
+        "lint-stylelint": "echo Linting With Stylelint... && stylelint public/styles/**/*.css && echo Lint passed. || (echo Lint failed && exit 1)",
         "lint-eslint": "echo Linting With Eslint... &&  yarn eslint --ext .js --quiet && echo Lint passed.|| (echo Lint failed && exit 1)",
         "lint-prettier": "echo Linting With Prettier... && yarn prettier --check . && echo Lint passed. || (echo Lint failed && exit 1)",
-        "format-stylelint": "echo Fixing Lint Issues With Stylelint... && stylelint src/styles/**/*.css --fix && echo Fix generated successfully. || (echo Fix failed! && exit 1)",
+        "format-stylelint": "echo Fixing Lint Issues With Stylelint... && stylelint public/styles/**/*.css --fix && echo Fix generated successfully. || (echo Fix failed! && exit 1)",
         "format-eslint": "echo Fixing Lint Issues With Eslint... && yarn eslint --ext .js --fix --quiet && echo Fix generated successfully. || (echo Fix failed! && exit 1)",
         "format-prettier": "echo Fixing Lint Issues With Prettier... && yarn prettier -w . && echo Fix generated successfully. || (echo Fix failed! && exit 1)",
         "lintci": "concurrently \"yarn:lintci-*\" && echo Please apply the following diff using git apply && git diff",
@@ -41,13 +41,12 @@
         "debug": "run-script-os",
         "debug:win32": "set DEBUG=Eleventy* & npx @11ty/eleventy",
         "debug:default": "DEBUG=Eleventy* npx @11ty/eleventy",
-        "build-webpack": "webpack --config webpack.prod.js",
-        "build-dev": "webpack --config webpack.dev.js",
         "build-11ty": "npx @11ty/eleventy",
         "build": "yarn build-webpack && yarn build-11ty",
-        "dev-webpack": "webpack --watch --config webpack.dev.js",
         "dev-11ty": "npx @11ty/eleventy --serve --port=8081",
         "clean": "rimraf public",
+        "start": "snowpack dev",
+        "build-snow": "snowpack build",
         "dev": "yarn clean && yarn build-dev && concurrently \"yarn:dev-*\""
     },
     "devDependencies": {
@@ -58,45 +57,41 @@
         "@commitlint/cli": "^12.1.4",
         "@commitlint/config-conventional": "^12.1.4",
         "@picgo/bump-version": "^1.1.0",
+        "@snowpack/plugin-babel": "^2.1.7",
+        "@snowpack/plugin-postcss": "^1.4.1",
+        "@snowpack/plugin-webpack": "^2.3.1",
         "autoprefixer": "^10.2.6",
-        "babel-loader": "^8.2.2",
         "concurrently": "^6.2.0",
-        "css-loader": "^5.2.6",
-        "css-minimizer-webpack-plugin": "^3.0.1",
         "cssnano": "^5.0.6",
         "eleventy-plugin-lazyimages": "^2.1.0",
         "eslint": "7.28.0",
-        "eslint-config-google": "^0.14.0",
         "eslint-config-prettier": "^8.3.0",
+        "eslint-config-standard": "^16.0.3",
         "eslint-plugin-html": "^6.1.2",
+        "eslint-plugin-import": "^2.23.4",
+        "eslint-plugin-node": "^11.1.0",
+        "eslint-plugin-promise": "^5.1.0",
         "favicons": "^6.2.2",
-        "favicons-webpack-plugin": "^5.0.2",
         "file-loader": "^6.2.0",
         "glob": "^7.1.7",
         "html-minifier": "^4.0.0",
-        "html-webpack-plugin": "^5.3.1",
         "husky": "^6.0.0",
-        "image-minimizer-webpack-plugin": "^2.2.0",
         "imagemin-gifsicle": "^7.0.0",
         "imagemin-jpegtran": "^7.0.0",
         "imagemin-optipng": "^8.0.0",
         "imagemin-svgo": "^9.0.0",
-        "mini-css-extract-plugin": "^1.6.0",
         "moment": "^2.29.1",
         "npm-run-all": "^4.1.5",
+        "postcss": "^8.3.5",
         "postcss-loader": "^6.1.0",
         "postcss-preset-env": "^6.7.0",
         "prettier": "2.3.1",
         "rimraf": "^3.0.2",
+        "snowpack": "^3.5.9",
         "stylelint": "13.13.1",
         "stylelint-config-prettier": "^8.0.2",
         "stylelint-config-standard": "22.0.0",
-        "tailwindcss": "^2.2.2",
-        "webpack": "^5.39.0",
-        "webpack-cli": "^4.7.2",
-        "webpack-dev-server": "^3.11.2",
-        "webpack-merge": "^5.8.0",
-        "yamljs": "^0.3.0"
+        "tailwindcss": "^2.2.2"
     },
     "dependencies": {
         "@11ty/eleventy-navigation": "^0.3.2",

diff --git a/src/index.js → public/index.js b/src/index.js → public/index.js
diff --git a/src/main.css → public/main.css b/src/main.css → public/main.css
diff --git a/src/scripts/scrollBar.js → public/scripts/scrollBar.js b/src/scripts/scrollBar.js → public/scripts/scrollBar.js
diff --git a/src/styles/main.css → public/styles/main.css b/src/styles/main.css → public/styles/main.css
diff --git a/snowpack.config.js b/snowpack.config.js
@@ -0,0 +1,42 @@
+// Snowpack Configuration File
+// See all supported options: https://www.snowpack.dev/reference/configuration
+
+/** @type {import("snowpack").SnowpackUserConfig } */
+module.exports = {
+    exclude: ['**/node_modules/**/*', 'src/_data'],
+    mount: {
+        public: '/',
+    },
+    plugins: [
+        ['@snowpack/plugin-babel'],
+        '@snowpack/plugin-postcss',
+        [
+            '@snowpack/plugin-webpack',
+            {
+                outputPattern: {
+                    css: 'main.css',
+                    js: '[filename].js',
+                },
+                extendConfig: (config) => {
+                    config.plugins.push(/* ... */);
+                    return config;
+                },
+                sourceMap: false,
+            },
+        ],
+    ],
+    routes: [
+        /* Enable an SPA Fallback in development: */
+        { match: 'routes', src: '.*', dest: '/index.html' },
+    ],
+    packageOptions: {
+        /* ... */
+    },
+    devOptions: {
+        tailwindConfig: './tailwind.config.js',
+    },
+    buildOptions: {
+        hmrDelay: 300,
+        /* ... */
+    },
+};
diff --git a/src/_includes/layouts/main.ejs b/src/_includes/layouts/main.ejs
@@ -8,20 +8,6 @@ title: A WebPage
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-        <!-- <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
-        <link
-            rel="icon"
-            type="image/png"
-            sizes="32x32"
-            href="/favicon-32x32.png"
-        />
-        <link
-            rel="icon"
-            type="image/png"
-            sizes="16x16"
-            href="/favicon-16x16.png"
-        />
-        <link rel="icon" href="/favicon.ico" /> -->
         <title><%= title %></title>
         <meta
             name="description"
@@ -69,7 +55,9 @@ title: A WebPage
                 "@context": "http://schema.org"
             }
         </script>
-        <% } %> <%- include('webpack.ejs') %>
+        <% } %>
+        <link rel="stylesheet" type="text/css" href="/index.css" />
+        <script src="/index.js" defer></script>
     </head>
     <body>
         <%- content %>

diff --git a/webpack.common.js b/webpack.common.js
diff --git a/webpack.dev.js b/webpack.dev.js
diff --git a/webpack.html b/webpack.html