First pass at Webpack manifest support for JS/CSS output bundles (#6)

* First pass at Webpack manifest support for js/css * Rename tag webpack_path and add feature tests
bridgetownrb · Apr 19, 2020 · a344661 · a344661
1 parent 7467cc6
commit a344661
Show file tree

Hide file tree

Showing 18 changed files with 363 additions and 52 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,13 @@
 # master
 
+# 0.10.1 / 2020-04-18
+
+Add `{% webpack_path [js|css] }` tag which pulls in the Webpack manifest and finds
+the hashed output bundles. Also works in concert with the Watcher so every time
+Webpack rebuilds the bundles, Bridgetown regenerates the site.
+
+[#6](https://github.com/bridgetownrb/bridgetown/pull/6)
+
 # 0.10.0 / 2020-04-17
 
 **Switch gears on _experimental_ component functionality.**

diff --git a/bridgetown-core/features/step_definitions.rb b/bridgetown-core/features/step_definitions.rb
@@ -107,7 +107,7 @@
 
 #
 
-Given(%r!^I have an? (.*) directory$!) do |dir|
+Given(%r!^I have an? \"?(.*?)\"? directory$!) do |dir|
   unless Paths.root_files.include?(dir)
     dir_in_src = File.join("src", dir)
     unless File.directory?(dir_in_src)

diff --git a/bridgetown-core/features/support/helpers.rb b/bridgetown-core/features/support/helpers.rb
@@ -18,7 +18,15 @@ def self.bridgetown_bin; source_dir.join("bin", "bridgetown"); end
 
   def self.source_dir; SOURCE_DIR; end
 
-  def self.root_files; ["bridgetown.config.yml", "plugins", "frontend"]; end
+  def self.root_files
+    [
+      ".bridgetown-webpack",
+      ".bridgetown-webpack/manifest.json",
+      "bridgetown.config.yml",
+      "plugins",
+      "frontend"
+    ]
+  end
 end
 
 #

diff --git a/bridgetown-core/features/webpack_path_tag.feature b/bridgetown-core/features/webpack_path_tag.feature
@@ -0,0 +1,77 @@
+Feature: WebpackPath Tag
+  As a web developer who likes managing frontend assets with Webpack
+  I want to be able to easily link JS and CSS output bundles using manifest.json
+  So browsers don't use cached, out-of-date bundles
+
+  Scenario: Use Webpack manifest
+    Given I have a _layouts directory
+    And I have a "_layouts/default.html" file with content:
+      """
+      <html>
+      <head>
+      <link rel="stylesheet" href="{% webpack_path css %}" />
+      <script src="{% webpack_path js %}" defer></script>
+      </head>
+      <body>
+      {{ content }}
+      </body>
+      </html>
+      """
+    And I have an "index.html" page with layout "default" that contains "page content"
+    And I have a ".bridgetown-webpack" directory
+    And I have a ".bridgetown-webpack/manifest.json" file with content:
+    """
+    {
+      "main.js": "all.hashgoeshere.js",
+      "main.css": "all.hashgoeshere.css"
+    }
+    """
+    When I run bridgetown build
+    Then the "output/index.html" file should exist
+    And I should see "/_bridgetown/static/js/all.hashgoeshere.js" in "output/index.html"
+    And I should not see "MISSING_WEBPACK_MANIFEST" in "output/index.html"
+
+  Scenario: Missing Webpack manifest
+    Given I have a _layouts directory
+    And I have a "_layouts/default.html" file with content:
+      """
+      <html>
+      <head>
+      <link rel="stylesheet" href="{% webpack_path css %}" />
+      <script src="{% webpack_path js %}" defer></script>
+      </head>
+      <body>
+      {{ content }}
+      </body>
+      </html>
+      """
+    And I have an "index.html" page with layout "default" that contains "page content"
+    When I run bridgetown build
+    Then the "output/index.html" file should exist
+    And I should see "MISSING_WEBPACK_MANIFEST" in "output/index.html"
+
+  Scenario: Missing Webpack manifest
+    Given I have a _layouts directory
+    And I have a "_layouts/default.html" file with content:
+      """
+      <html>
+      <head>
+      <link rel="stylesheet" href="{% webpack_path bad %}" />
+      </head>
+      <body>
+      {{ content }}
+      </body>
+      </html>
+      """
+    And I have an "index.html" page with layout "default" that contains "page content"
+    And I have a ".bridgetown-webpack" directory
+    And I have a ".bridgetown-webpack/manifest.json" file with content:
+    """
+    {
+      "main.js": "all.hashgoeshere.js",
+      "main.css": "all.hashgoeshere.css"
+    }
+    """
+    When I run bridgetown build
+    Then the "output/index.html" file should not exist
+    And I should see "Liquid Exception" in the build output
diff --git a/bridgetown-core/lib/bridgetown-core/tags/webpack_path.rb b/bridgetown-core/lib/bridgetown-core/tags/webpack_path.rb
@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module Bridgetown
+  module Tags
+    class WebpackPath < Liquid::Tag
+      include Bridgetown::Filters::URLFilters
+
+      def initialize(tag_name, asset_type, tokens)
+        super
+
+        # js or css
+        @asset_type = asset_type.strip
+      end
+
+      def render(context)
+        @context = context
+        site = context.registers[:site]
+
+        frontend_path = relative_url("_bridgetown/static")
+
+        manifest_file = site.in_root_dir(".bridgetown-webpack", "manifest.json")
+        if File.exist?(manifest_file)
+          manifest = JSON.parse(File.read(manifest_file))
+          if @asset_type == "js"
+            js_path = manifest["main.js"].split("/").last
+            [frontend_path, "js", js_path].join("/")
+          elsif @asset_type == "css"
+            css_path = manifest["main.css"].split("/").last
+            [frontend_path, "css", css_path].join("/")
+          else
+            Bridgetown.logger.error("Unknown Webpack asset type", @asset_type)
+            nil
+          end
+        else
+          "MISSING_WEBPACK_MANIFEST"
+        end
+      end
+    end
+  end
+end
+
+Liquid::Template.register_tag("webpack_path", Bridgetown::Tags::WebpackPath)
diff --git a/bridgetown-core/lib/bridgetown-core/version.rb b/bridgetown-core/lib/bridgetown-core/version.rb
@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Bridgetown
-  VERSION = "0.10.0"
+  VERSION = "0.10.1"
 end
diff --git a/bridgetown-core/lib/bridgetown-core/watcher.rb b/bridgetown-core/lib/bridgetown-core/watcher.rb
@@ -37,8 +37,11 @@ def watch(site, options)
     private
 
     def build_listener(site, options)
+      webpack_path = site.in_root_dir(".bridgetown-webpack")
+      FileUtils.mkdir(webpack_path) unless Dir.exist?(webpack_path)
       Listen.to(
         options["source"],
+        site.in_root_dir(".bridgetown-webpack"),
         ignore: listen_ignore_paths(options),
         force_polling: options["force_polling"],
         &listen_handler(site)
@@ -54,7 +57,7 @@ def listen_handler(site)
         Bridgetown.logger.info "Regenerating…"
         Bridgetown.logger.info "", "#{n} file(s) changed at #{t.strftime("%Y-%m-%d %H:%M:%S")}"
 
-        c.each { |path| Bridgetown.logger.info "", path["#{site.source}/".length..-1] }
+        c.each { |path| Bridgetown.logger.info "", path["#{site.root_dir}/".length..-1] }
         process(site, t)
       end
     end

diff --git a/bridgetown-core/lib/site_template/.gitignore b/bridgetown-core/lib/site_template/.gitignore
@@ -3,4 +3,5 @@ node_modules
 .sass-cache
 .bridgetown-cache
 .bridgetown-metadata
+.bridgetown-webpack
 vendor
diff --git a/bridgetown-core/lib/site_template/package.json b/bridgetown-core/lib/site_template/package.json
@@ -19,6 +19,7 @@
     "sass-loader": "^8.0.2",
     "style-loader": "^1.1.3",
     "webpack": "^4.42.1",
-    "webpack-cli": "^3.3.11"
+    "webpack-cli": "^3.3.11",
+    "webpack-manifest-plugin": "^2.2.0"
   }
 }
diff --git a/bridgetown-core/lib/site_template/src/_includes/head.html b/bridgetown-core/lib/site_template/src/_includes/head.html
@@ -5,5 +5,5 @@
 
 <meta name="description" content="{{ site.metadata.description }}" />
 
-<link rel="stylesheet" href="/_bridgetown/static/css/all.css{% if bridgetown.environment == 'development' %}?{{ site.time | date: '%I%M%s' }}{% endif %}" />
-<script src="/_bridgetown/static/js/all.js{% if bridgetown.environment == 'development' %}?{{ site.time | date: '%I%M%s' }}{% endif %}"></script>
+<link rel="stylesheet" href="{% webpack_path css %}" />
+<script src="{% webpack_path js %}" defer></script>
diff --git a/bridgetown-core/lib/site_template/webpack.config.js b/bridgetown-core/lib/site_template/webpack.config.js
@@ -1,33 +1,44 @@
-const path = require('path');
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const path = require("path")
+const MiniCssExtractPlugin = require("mini-css-extract-plugin")
+const ManifestPlugin = require("webpack-manifest-plugin")
 
 module.exports = {
-  entry: './frontend/javascript/index.js',
+  entry: "./frontend/javascript/index.js",
   devtool: "source-map",
+  // Set some or all of these to true if you want more verbose logging:
+  stats: {
+    modules: false,
+    builtAt: false,
+    timings: false,
+    children: false
+  },
   output: {
-    path: path.resolve(__dirname, 'output', '_bridgetown', 'static', 'js'),
-    filename: 'all.js'
+    path: path.resolve(__dirname, "output", "_bridgetown", "static", "js"),
+    filename: "all.[contenthash].js"
   },
   resolve: {
-    extensions: ['.js']
+    extensions: [".js"]
   },
   plugins: [
     new MiniCssExtractPlugin({
-      filename: "../css/all.css",
+      filename: "../css/all.[contenthash].css",
+    }),
+    new ManifestPlugin({
+      fileName: path.resolve(__dirname, ".bridgetown-webpack", "manifest.json")
     })
   ],
   module: {
     rules: [
       {
         test: /\.js/,
         use: {
-          loader: 'babel-loader',
+          loader: "babel-loader",
           options: {
             presets: [
-              '@babel/preset-env'
+              "@babel/preset-env"
             ],
             plugins: [
-              '@babel/plugin-proposal-class-properties'
+              "@babel/plugin-proposal-class-properties"
             ]
           }
         }
@@ -36,25 +47,25 @@ module.exports = {
         test: /\.(sc|c)ss$/,
         use: [
           MiniCssExtractPlugin.loader,
-          'css-loader',
+          "css-loader",
           {
-            loader: 'sass-loader',
+            loader: "sass-loader",
             options: {
               sassOptions: {
-                includePaths: [path.resolve(__dirname, 'src/_includes')]
+                includePaths: [path.resolve(__dirname, "src/_includes")]
               }
             }
           }
         ]
       },
       {
         test: /\.woff2?$|\.ttf$|\.eot$|\.svg$/,
-        loader: 'file-loader',
+        loader: "file-loader",
         options: {
-          outputPath: '../fonts',
-          publicPath: '../fonts'
+          outputPath: "../fonts",
+          publicPath: "../fonts"
         },
       }
     ]
   }
-};
+}
diff --git a/bridgetown-website/.gitignore b/bridgetown-website/.gitignore
@@ -3,4 +3,5 @@ node_modules
 .sass-cache
 .bridgetown-cache
 .bridgetown-metadata
+.bridgetown-webpack
 vendor
diff --git a/bridgetown-website/frontend/fonts/inter.css b/bridgetown-website/frontend/fonts/inter.css
@@ -1,3 +1,6 @@
+/* Commenting out the weights we're not using: */
+
+/*
 @font-face {
   font-family: 'Inter';
   font-style:  normal;
@@ -48,6 +51,7 @@
   src: url("inter-web/Inter-LightItalic.woff2?v=3.12") format("woff2"),
        url("inter-web/Inter-LightItalic.woff?v=3.12") format("woff");
 }
+*/
 
 @font-face {
   font-family: 'Inter';
@@ -83,6 +87,7 @@
        url("inter-web/Inter-MediumItalic.woff?v=3.12") format("woff");
 }
 
+/*
 @font-face {
   font-family: 'Inter';
   font-style:  normal;
@@ -99,6 +104,7 @@
   src: url("inter-web/Inter-SemiBoldItalic.woff2?v=3.12") format("woff2"),
        url("inter-web/Inter-SemiBoldItalic.woff?v=3.12") format("woff");
 }
+*/
 
 @font-face {
   font-family: 'Inter';
@@ -117,6 +123,7 @@
        url("inter-web/Inter-BoldItalic.woff?v=3.12") format("woff");
 }
 
+/*
 @font-face {
   font-family: 'Inter';
   font-style:  normal;
@@ -133,6 +140,7 @@
   src: url("inter-web/Inter-ExtraBoldItalic.woff2?v=3.12") format("woff2"),
        url("inter-web/Inter-ExtraBoldItalic.woff?v=3.12") format("woff");
 }
+*/
 
 @font-face {
   font-family: 'Inter';
@@ -160,6 +168,7 @@ Usage:
     html { font-family: 'Inter var', sans-serif; }
   }
 */
+/*
 @font-face {
   font-family: 'Inter var';
   font-weight: 100 900;
@@ -176,7 +185,7 @@ Usage:
   font-named-instance: 'Italic';
   src: url("inter-web/Inter-italic.var.woff2?v=3.12") format("woff2");
 }
-
+*/
 
 /* --------------------------------------------------------------------------
 [EXPERIMENTAL] Multi-axis, single variable font.
@@ -191,10 +200,12 @@ explicitly, e.g.
   .italic { font-variation-settings: "slnt" 10deg }
 
 */
+/*
 @font-face {
   font-family: 'Inter var experimental';
   font-weight: 100 900;
   font-display: auto;
   font-style: oblique 0deg 10deg;
   src: url("inter-web/Inter.var.woff2?v=3.12") format("woff2");
 }
+*/
diff --git a/bridgetown-website/frontend/javascript/index.js b/bridgetown-website/frontend/javascript/index.js
@@ -54,4 +54,3 @@ document.addEventListener('DOMContentLoaded', () => {
   swup.preloadPage('/about/')
   swup.preloadPage('/blog/') */
 })
-//console.info("Bridgetown is loaded!")
diff --git a/bridgetown-website/package.json b/bridgetown-website/package.json
@@ -19,7 +19,8 @@
     "sass-loader": "^8.0.2",
     "style-loader": "^1.1.3",
     "webpack": "^4.42.1",
-    "webpack-cli": "^3.3.11"
+    "webpack-cli": "^3.3.11",
+    "webpack-manifest-plugin": "^2.2.0"
   },
   "dependencies": {
     "@swup/body-class-plugin": "^1.0.2",