webpack_native 0.4.2 → 0.5.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6e4009bf336ddda06916af069c42c99129febd5b684391506dc3a2358ac93886
-  data.tar.gz: 54279f3a7391baa78c1a0047a986ac1434cc3e391e426e5313fc9be6af31cd79
+  metadata.gz: c43ea964f3ee6c2e1bf0d48cf266d9fd06c066ab7e61d9a07f1178d5eb177398
+  data.tar.gz: e7c249c8851f04ee278540b4db1a53b3ecf87ef242578b38c12dfd1a0477f7f9
 SHA512:
-  metadata.gz: 4affff6d93be02addccc0de31d5378e8627d26fc931ce727ad18def05379bae824448f1b51959e19eee59d2cb4cf5f34cd28d5a9bcec3108cbaa215153eaa0af
-  data.tar.gz: a2e9dad95ddbffbfc83c28bcfbbdd6cff109f24c290f34333efc07550e8e277274ca1375de7b07f8c26ccc938320ad4dc3901ada99cc5dbc37ee38e2e5a1ecd2
+  metadata.gz: bde4f040a35fafe117007e4dc40aa5fdf5497ba4fe3afb19922f5c617d6fc17aec3c4b168e35d3c7956ecdd223503e379d10d3ff2b37ff0ee5a43cf3edd86b9c
+  data.tar.gz: b08b606119d3578cdabc440385bc7ab1be58c67a796a5fe9335c95625734dbec6c1e996453c984bb51bd3fed13a3f03dd41bbd5966b57d10400ad30cde6be312

data/lib/generators/webpack_native/install_generator.rb

@@ -19,9 +19,9 @@ class WebpackNative::InstallGenerator < Rails::Generators::Base
   def inject_stylesheets_and_javascript_tags
     application_layout = "#{Rails.root}/app/views/layouts/application.html.erb"
 
-    stylesheets_tag = "<%= webpack_stylesheet_url 'application', media: 'all', 'data-turbolinks-track': 'reload' %>"
+    stylesheets_tag = "<%= webpack_stylesheet_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>"
 
-    javascripts_tag = "<%= webpack_javascript_url 'application', 'data-turbolinks-track': 'reload' %>"
+    javascripts_tag = "<%= webpack_javascript_tag 'application', 'data-turbolinks-track': 'reload' %>"
 
     inject_into_file application_layout, "\n\t\t#{stylesheets_tag}\n\t\t#{javascripts_tag}\n", :before => '</head>'
   end

data/lib/generators/webpack_native/templates/webpack_native/package.json

@@ -15,7 +15,9 @@
     "@babel/preset-env": "^7.11.5",
     "autoprefixer": "^10.0.0",
     "babel-loader": "^8.1.0",
+    "@gfx/zopfli": "^1.0.15",
     "clean-webpack-plugin": "^3.0.0",
+    "compression-webpack-plugin": "^6.0.3",
     "css-loader": "^4.3.0",
     "file-loader": "^6.1.0",
     "mini-css-extract-plugin": "^0.11.2",

data/lib/generators/webpack_native/templates/webpack_native/webpack.config.js

@@ -3,6 +3,8 @@ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const TerserJSPlugin = require('terser-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const CompressionPlugin = require('compression-webpack-plugin');
+const zopfli = require('@gfx/zopfli');
 const WebpackManifestPlugin = require('webpack-manifest-plugin');
 const webpack = require('webpack');
 
@@ -12,7 +14,7 @@ module.exports = (env, options) => {
 
   return {
 
-    devtool: "cheap-module-eval-source-map",
+    devtool: devMode ? "cheap-module-eval-source-map" : undefined,
     optimization: {
       minimizer: [
         new TerserJSPlugin({}),
@@ -23,7 +25,7 @@ module.exports = (env, options) => {
       application: "./src/javascripts/application.js"
     },
     output: {
-      filename: devMode ? '[name].js' : '[name]-[contenthash].js',
+      filename: '[name]-[contenthash].js',
       path: path.resolve(__dirname, '../../public/webpack_native')
     },
     module: {
@@ -55,13 +57,13 @@ module.exports = (env, options) => {
           ],
         },
         {
-          test: /\.(png|jpg|gif|svg)$/i,
+          test: /\.(png|jpg|jpeg|gif|svg|ttf|woff2|woff|eot|webmanifest)$/i,
           use: [
             {
               loader: 'url-loader',
               options: {
-                limit: 8192,
-                name: devMode ? '[name].[ext]' : '[name]-[hash:7].[ext]'
+                limit: false,
+                name: '[name]-[hash:7].[ext]'
               },
             },
             // { loader: 'image-webpack-loader' }
@@ -77,9 +79,33 @@ module.exports = (env, options) => {
       new WebpackManifestPlugin(),
       new CleanWebpackPlugin(),
       new MiniCssExtractPlugin({
-        filename: devMode ? '[name].css' : '[name]-[contenthash].css',
+        filename: '[name]-[contenthash].css',
+      }),
+      // In production, compress static files to .gz (using zopfli) and .br (using brotli) format
+      !devMode && new CompressionPlugin({
+        filename: '[path][base].gz[query]',
+        compressionOptions: {
+          numiterations: 15
+        },
+        algorithm(input, compressionOptions, callback) {
+          return zopfli.gzip(input, compressionOptions, callback);
+        },
+        test: /\.(js|css|html|svg|ico|eot|ttf|otf|map)$/,
+        threshold: 10240,
+        minRatio: 0.8,
+        deleteOriginalAssets: false
+      }),
+      !devMode && new CompressionPlugin({
+        filename: '[path][base].br',
+        algorithm: 'brotliCompress',
+        test: /\.(js|css|html|svg|ico|eot|ttf|otf|map)$/,
+        compressionOptions: {
+          level: 11,
+        },
+        threshold: 10240,
+        minRatio: 0.8,
       })
-    ],
+    ].filter(Boolean), // filter(Boolean) to prevent false values when it's devMode
     // resolve: {
     //   alias: {},
     //   modules: [
@@ -89,6 +115,6 @@ module.exports = (env, options) => {
     //   ]
     // }
 
-  }
+  };
 
-}
+};

data/lib/webpack_native/railtie.rb

@@ -17,7 +17,8 @@ class WebpackNative::Railtie < ::Rails::Railtie
   end
 
   initializer "webpack_native_set_manifest" do
-    if Rails.env.production?
+    
+    if Rails.env.production? # on production only
 
       # create public/webpack_native if it doesn't exist:
 
@@ -39,6 +40,7 @@ class WebpackNative::Railtie < ::Rails::Railtie
       Rails.configuration.x.webpack_native.webpack_manifest_file = WebpackNative::WebpackNativeHelper.load_webpack_manifest
 
     end
+    
   end
 
   def start_webpack

data/lib/webpack_native/version.rb

@@ -1,3 +1,3 @@
 module WebpackNative
-  VERSION = "0.4.2"
+  VERSION = "0.5.2"
 end

data/lib/webpack_native/webpack_native_helper.rb

@@ -1,28 +1,115 @@
 module WebpackNative::WebpackNativeHelper
-
-  def webpack_stylesheet_url(asset, **html_options)
+  
+  def webpack_stylesheet_tag(asset, **html_options)
     html_options = html_options.merge(
-      href: "/webpack_native/#{webpack_manifest_file.fetch("#{asset}.css")}",
+      href: webpack_stylesheet_path(asset),
       rel: "stylesheet"
     )
     tag.link(html_options).html_safe
   end
 
-  def webpack_javascript_url(asset, **html_options)
+  def webpack_stylesheet_path(asset, **options)
+    path_to_asset(webpack_native_lookup("#{asset.gsub('.css', '')}.css"), options)
+  end
+
+  def webpack_stylesheet_url(asset, **options)
+    url_to_asset(webpack_native_lookup("#{asset.gsub('.css', '')}.css"), options)
+  end
+
+  def webpack_javascript_tag(asset, **html_options)
     html_options = html_options.merge(
       type: "text/javascript",
-      src: "/webpack_native/#{webpack_manifest_file.fetch("#{asset}.js")}"
+      src: webpack_javascript_path(asset)
     )
     content_tag("script".freeze, nil, html_options).html_safe
     # or tag.script(html_options).html_safe
   end
 
-  def webpack_image_url(file_name, **options)
-    image_tag("/webpack_native/#{file_name}", **options)
+  def webpack_javascript_url(asset, **options)
+    url_to_asset(webpack_native_lookup("#{asset.gsub('.js', '')}.js"), options)
+  end
+  def webpack_javascript_path(asset, **options)
+    path_to_asset(webpack_native_lookup("#{asset.gsub('.js', '')}.js"), options)
+  end
+
+  def webpack_image_tag(image, **options)
+    image_tag(webpack_native_lookup(image), **options)
   end
 
+  def webpack_image_url(image, **options)
+    image_url(webpack_native_lookup(image), **options)
+  end
+
+  def webpack_image_path(image, **options)
+    image_path(webpack_native_lookup(image), **options)
+  end
+  
+  # ====== Favicon helpers ======
+  # usage:
+  # <%= webpack_favicons('apple-touch-icon.png', 'favicon-32x32.png', 'favicon-16x16.png') %>
+  # <%= webpack_webmanifest('manifest.webmanifest') %>
+  
+  # result:
+  #<link rel="apple-touch-icon" sizes="180x180" href="/webpack_native/apple-touch-icon.png">
+  #<link rel="icon" type="image/png" sizes="32x32" href="/webpack_native/favicon-32x32.png">
+  #<link rel="icon" type="image/png" sizes="16x16" href="/webpack_native/favicon-16x16.png">
+  #<link rel="manifest" href="/webpack_native/site.webmanifest">
+
+  def webpack_favicons(*args)
+    tags = []
+    args.each do |favicon|
+      
+      filename = File.basename(favicon, ".*") # exclude the extension
+      ext = File.extname(favicon)
+      
+      if ext == '.webmanifest'
+        manifest = favicon
+        html_options = {
+          rel: 'manifest',
+          href: webpack_native_lookup(manifest)
+        }
+        
+      else
+        mimetypes = {
+          '.png' => 'image/png',
+          '.jpg' => 'image/jpg',
+          '.jpeg' => 'image/jpeg',
+          '.webp' => 'image/webp',
+          '.tiff' => 'image/tiff',
+          '.svg' => 'image/svg+xml',
+          '.ico' => 'image/x-icon'
+        }
+        
+        html_options = {
+          rel: filename == 'apple-touch-icon' ? 'apple-touch-icon' : 'icon',
+          type: mimetypes[ext],
+          href: webpack_native_lookup(favicon)
+        }
+        
+        sizes = filename[/(.+)?([0-9]{2,3}x[0-9]{2,3})(.+)?/, 2]
+        
+        sizes = '180×180' if filename == 'apple-touch-icon'
+          
+        html_options = html_options.merge({sizes: sizes}) unless sizes.nil?
+        
+      end
+       
+      tags << tag.link(html_options)
+      
+    end
+    
+    return tags.join.html_safe
+  
+  end
+  
+  # ====== End favicon helpers ======
+
   private
 
+    def webpack_native_lookup(file)
+      "/webpack_native/#{webpack_manifest_file.fetch("#{file}")}"
+    end
+
     def webpack_manifest_file
       # in production, webpack_manifest_file is initialized in railtie.rb file to load one time only, while in development we call load_webpack_manifest on each new request
 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: webpack_native
 version: !ruby/object:Gem::Version
-  version: 0.4.2
+  version: 0.5.2
 platform: ruby
 authors:
 - scratchoo
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-10-08 00:00:00.000000000 Z
+date: 2021-03-13 00:00:00.000000000 Z
 dependencies: []
 description: Use vanilla webpack to manage your assets efficiently, no webpacker or
   asset pipeline anymore!