Use html-webpack-template

neiesc · Oct 17, 2020 · c357b84 · c357b84
1 parent ab968b0
commit c357b84
Show file tree

Hide file tree

Showing 5 changed files with 779 additions and 91 deletions.
diff --git a/config/webpack.common.js b/config/webpack.common.js
@@ -77,6 +77,10 @@ module.exports = {
   },
   module: {
     rules: [
+      {
+        test: /\.html$/,
+        use: ['ejs-loader', 'extract-loader', 'html-loader']
+      },
       {
         test: /\.css$/,
         use: [

diff --git a/package.json b/package.json
@@ -28,12 +28,14 @@
     "babel-polyfill": "^6.26.0",
     "copy-webpack-plugin": "^6.0.2",
     "css-loader": "^3.6.0",
+    "ejs-loader": "^0.5.0",
     "eslint": "^6.8.0",
     "eslint-config-standard": "^14.1.1",
     "eslint-plugin-import": "^2.21.2",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.1",
+    "extract-loader": "^5.1.0",
     "html-loader": "^1.1.0",
     "html-webpack-plugin": "^4.3.0",
     "mini-css-extract-plugin": "^0.9.0",

diff --git a/src/index.html b/src/index.html
@@ -1,81 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <title><%=htmlWebpackPlugin.options.title%></title>
-    <meta name="keywords" content="<%=htmlWebpackPlugin.options.keywords%>" />
-    <meta
-      name="description"
-      content="<%=htmlWebpackPlugin.options.description%>"
-    />
-    <meta name="author" content="<%=htmlWebpackPlugin.options.author%>" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
-    />
-
-    <link rel="manifest" href="/manifest.json" />
-
-    <link
-      rel="preload"
-      media="screen"
-      as="style"
-      onload="this.onload=null;this.rel='stylesheet'"
-      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css"
-    />
-
-    <link
-      rel="preload"
-      media="screen"
-      as="style"
-      onload="this.onload=null;this.rel='stylesheet'"
-      href="https://fonts.googleapis.com/css?family=Roboto+Slab"
-    />
-    <link
-      rel="preload"
-      media="screen"
-      as="style"
-      onload="this.onload=null;this.rel='stylesheet'"
-      href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
-      integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
-      crossorigin="anonymous"
-    />
-
-    <!-- favicon -->
-    <link rel="apple-touch-icon" sizes="180x180" 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="manifest" href="/site.webmanifest" />
-    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
-    <meta name="msapplication-TileColor" content="#da532c" />
-    <meta name="theme-color" content="#ffffff" />
-
-    <!-- Twitter Card data -->
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:title" content="<%=htmlWebpackPlugin.options.title%>" />
-    <meta
-      name="twitter:description"
-      content="<%=htmlWebpackPlugin.options.description%>"
-    />
-    <meta
-      name="twitter:image"
-      content="https://edinei.dev/mstile-150x150.png"
-    />
-
-    <!-- Open Graph data -->
-    <meta property="og:title" content="<%=htmlWebpackPlugin.options.title%>" />
-    <meta property="og:type" content="website" />
-    <meta property="og:image" content="https://edinei.dev/mstile-150x150.png" />
-    <meta
-      property="og:image:secure_url"
-      content="https://edinei.dev/mstile-150x150.png"
-    />
-    <meta
-      property="og:description"
-      content="<%=htmlWebpackPlugin.options.description%>"
-    />
-  </head>
-
+  <%=require("html-loader!./shared/head.html")%>
   <body>
     <div>
       <main class="info">
@@ -115,9 +40,7 @@ <h1>Edinei Cavalcanti</h1>
             >
             com experiência em grandes aplicações.
           </p>
-          <p>
-            Bacharel em ciência da computação em 2015 pela UNIP.
-          </p>
+          <p>Bacharel em ciência da computação em 2015 pela UNIP.</p>
           <p>
             Entusiasta em (IA) Inteligência artificial, IoT (Internet das
             coisas), Blockchain, Segurança e Open Source.
@@ -235,9 +158,7 @@ <h4>Social Networks</h4>
           </a>
         </section>
         <section class="hashtags">
-          <p>
-            #developer #dotnet #nodejs #python #ai #machine-learning
-          </p>
+          <p>#developer #dotnet #nodejs #python #ai #machine-learning</p>
         </section>
       </main>
 

diff --git a/src/shared/head.html b/src/shared/head.html
@@ -0,0 +1,72 @@
+<head>
+  <meta charset="utf-8" />
+  <title><%=htmlWebpackPlugin.options.title%></title>
+  <meta name="keywords" content="<%=htmlWebpackPlugin.options.keywords%>" />
+  <meta
+    name="description"
+    content="<%=htmlWebpackPlugin.options.description%>"
+  />
+  <meta name="author" content="<%=htmlWebpackPlugin.options.author%>" />
+  <meta
+    name="viewport"
+    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
+  />
+
+  <link rel="manifest" href="/manifest.json" />
+
+  <link
+    rel="preload"
+    media="screen"
+    as="style"
+    onload="this.onload=null;this.rel='stylesheet'"
+    href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css"
+  />
+
+  <link
+    rel="preload"
+    media="screen"
+    as="style"
+    onload="this.onload=null;this.rel='stylesheet'"
+    href="https://fonts.googleapis.com/css?family=Roboto+Slab"
+  />
+  <link
+    rel="preload"
+    media="screen"
+    as="style"
+    onload="this.onload=null;this.rel='stylesheet'"
+    href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
+    integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
+    crossorigin="anonymous"
+  />
+
+  <!-- favicon -->
+  <link rel="apple-touch-icon" sizes="180x180" 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="manifest" href="/site.webmanifest" />
+  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
+  <meta name="msapplication-TileColor" content="#da532c" />
+  <meta name="theme-color" content="#ffffff" />
+
+  <!-- Twitter Card data -->
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content="<%=htmlWebpackPlugin.options.title%>" />
+  <meta
+    name="twitter:description"
+    content="<%=htmlWebpackPlugin.options.description%>"
+  />
+  <meta name="twitter:image" content="https://edinei.dev/mstile-150x150.png" />
+
+  <!-- Open Graph data -->
+  <meta property="og:title" content="<%=htmlWebpackPlugin.options.title%>" />
+  <meta property="og:type" content="website" />
+  <meta property="og:image" content="https://edinei.dev/mstile-150x150.png" />
+  <meta
+    property="og:image:secure_url"
+    content="https://edinei.dev/mstile-150x150.png"
+  />
+  <meta
+    property="og:description"
+    content="<%=htmlWebpackPlugin.options.description%>"
+  />
+</head>