Merge pull request #16 from tomik23/assets

Replace file-loader -> assets

.gitignore

@@ -1,3 +1 @@
-.htaccess
-docs/
 node_modules/

README.md

@@ -69,7 +69,8 @@ npm run prod
 - [`css-loader`](https://webpack.js.org/loaders/css-loader/) - Resolves CSS imports into JS
 - [`pug-loader`](https://github.com/pugjs/pug-loader/) - Pug loader template
 - [`style-loader`](https://webpack.js.org/loaders/style-loader/) - Inject CSS into the DOM
-- [`file-loader`](https://webpack.js.org/loaders/file-loader/) - Copy files to build folder
+- [`asset modules`](https://webpack.js.org/guides/asset-modules/#resource-assets) replace ral-loader, url-loader, file-loader
+- ~~[`file-loader`](https://webpack.js.org/loaders/file-loader/) - Copy files to build folder~~
 
 ### Plugins
 

config/webpack.base.js

@@ -1,24 +1,13 @@
 const path = require('path');
 const HtmlWebPackPlugin = require('html-webpack-plugin');
 
-const OUTPUT_DIR = 'docs';
-
 // only form HtmlWebPackPlugin
 const config = [
   { site: 'index', share: 'share' },
   { site: 'about', share: 'share' },
   { site: 'contact' }
 ];
 
-// configure Resolve
-const configureResolveAlias = () => {
-  return {
-    alias: {
-      'assets': path.resolve(__dirname, '../sources/images')
-    }
-  }
-}
-
 // configure Babel Loader
 const configureBabelLoader = () => {
   return {
@@ -42,15 +31,6 @@ const configurePugLoader = () => {
   }
 }
 
-// configure Output
-const configureOutput = () => {
-  return {
-    path: path.resolve(__dirname, `../${OUTPUT_DIR}`),
-    filename: 'vendor/js/[name].[fullhash].js',
-    chunkFilename: 'vendor/js/[name].[fullhash].js',
-  }
-}
-
 // configure HtmlWebPackPlugin
 const entryHtmlPlugins = config.map(({ site, share }) => {
   return new HtmlWebPackPlugin({
@@ -61,6 +41,16 @@ const entryHtmlPlugins = config.map(({ site, share }) => {
   })
 })
 
+// configure Output
+const configureOutput = () => {
+  return {
+    path: path.resolve(__dirname, '../docs'),
+    filename: 'vendor/js/[name].[fullhash].js',
+    // assetModuleFilename: 'images/static/[name].[hash][ext]',
+    publicPath: './',
+  }
+}
+
 module.exports = {
   entry: {
     index: {
@@ -77,11 +67,19 @@ module.exports = {
     share: './sources/js/module/share.js'
   },
   output: configureOutput(),
-  resolve: configureResolveAlias(),
   module: {
     rules: [
+      // Images: Copy image files to build folder
+      // https://webpack.js.org/guides/asset-modules/#resource-assets
+      {
+        test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
+        type: 'asset/resource',
+        generator: {
+          filename: 'images/static/[name].[hash][ext]',
+        },
+      },
       configureBabelLoader(),
-      configurePugLoader(),
+      configurePugLoader()
     ],
   },
   plugins: [

config/webpack.dev.js

@@ -1,3 +1,4 @@
+const path = require('path');
 const webpack = require('webpack');
 const baseConfig = require('./webpack.base.js');
 const { merge } = require('webpack-merge');
@@ -6,24 +7,19 @@ const { cssLoaders } = require('./util');
 // Configure Dev Server
 const configureDevServer = () => {
   return {
-    contentBase: './sources',
+    contentBase: path.resolve(__dirname, '../sources'),
     open: true,
     port: 3000,
-    inline: true,
-    stats: "errors-only",
+    liveReload: true,
     hot: true,
+    publicPath: '/',
+    inline: true,
+    watchContentBase: true,
   };
 };
 
-// configure File Loader
-const configureFileLoader = () => {
-  return {
-    test: /\.(jpe?g|png|gif|svg)$/i,
-    loader: 'file-loader'
-  }
-}
-
 module.exports = merge(baseConfig, {
+  devtool: 'eval-source-map',
   mode: 'development',
   target: 'web',
   devServer: configureDevServer(),
@@ -37,10 +33,10 @@ module.exports = merge(baseConfig, {
           ...cssLoaders
         ],
       },
-      configureFileLoader()
     ],
   },
   plugins: [
+    new webpack.HotModuleReplacementPlugin(),
     new webpack.DefinePlugin({
       PRODUCTION: JSON.stringify(false)
     }),

config/webpack.prod.js

@@ -1,4 +1,5 @@
 const webpack = require('webpack');
+const path = require('path');
 const baseConfig = require('./webpack.base.js');
 const { merge } = require('webpack-merge');
 
@@ -11,22 +12,6 @@ const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const { cssLoaders } = require('./util');
 
-// configure File Loader
-const configureFileLoader = () => {
-  return {
-    test: /\.(jpe?g|png|gif|svg)$/i,
-    loader: 'file-loader',
-    options: {
-      name: '[path][name].[ext]',
-      outputPath: (url, resourcePath, context) => {
-        if (/sources/.test(url)) {
-          return url.replace('sources', '../..');
-        }
-      }
-    },
-  }
-}
-
 // configure Optimization
 const configureOptimization = () => {
   return {
@@ -57,8 +42,17 @@ const configureSW = () => {
 const configureCopy = () => {
   return {
     patterns: [
-      { from: 'sources/assets/', to: 'assets/' },
-      { from: 'sources/images/', to: 'images/' }
+      {
+        from: 'sources/assets/',
+        to: 'assets/'
+      },
+      {
+        from: 'sources/images/',
+        to: 'images/',
+        globOptions: {
+          ignore: ['**.svg']
+        }
+      },
     ]
   }
 };
@@ -71,11 +65,16 @@ module.exports = merge(baseConfig, {
       {
         test: /\.(css|sass|scss)$/,
         use: [
-          MiniCssExtractPlugin.loader,
+          {
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              // set path for images
+              publicPath: '../../',
+            },
+          },
           ...cssLoaders
         ],
       },
-      configureFileLoader()
     ],
   },
   optimization: configureOptimization(),

docs/about.html

@@ -0,0 +1 @@
+<!doctype html><html class="about" lang="pl" dir="ltr"><head><link rel="dns-prefetch" href="//google-analytics.com"><link rel="preconnect" href="//fonts.gstatic.com/" crossorigin><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="description" content="description - about"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="robots" content="index,follow"><meta name="theme-color" content="#ffffff"><meta name="msapplication-navbutton-color" content="#ffffff"><meta name="apple-mobile-web-app-status-bar-style" content="#ffffff"><meta content="telephone=no" name="format-detection"><title>title - about</title><link rel="manifest" href="/assets/manifest.json"><link rel="icon" type="image/x-icon" href="/favicon.ico"><script defer="defer" src="./vendor/js/about.2e9dd730285391ac05be.js"></script><script defer="defer" src="./vendor/js/share.2e9dd730285391ac05be.js"></script><link href="./vendor/css/about.2e9dd730285391ac05be.css" rel="stylesheet"></head><body><div class="nav"><a href="./" title="index">index</a><a class="active" href="./about.html" title="about me">about me</a><a href="./contact.html" title="CONTACT">contact</a></div><h1>ABOUT ME</h1><img class="responsive" src="images/about.jpg"></body></html>

docs/assets/.htaccess

@@ -0,0 +1,94 @@
+RewriteEngine On
+RewriteBase /
+RewriteCond %{HTTP_HOST} ^xxxxxxx.pl [NC]
+RewriteRule ^(.*)$ http://xxxxxxx.pl/$1 [L,R=301]
+
+<IfModule mod_deflate.c>
+  # Compress HTML, CSS, JavaScript, Text, XML and fonts
+  AddOutputFilterByType DEFLATE application/javascript
+  AddOutputFilterByType DEFLATE application/rss+xml
+  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
+  AddOutputFilterByType DEFLATE application/x-font
+  AddOutputFilterByType DEFLATE application/x-font-opentype
+  AddOutputFilterByType DEFLATE application/x-font-otf
+  AddOutputFilterByType DEFLATE application/x-font-truetype
+  AddOutputFilterByType DEFLATE application/x-font-ttf
+  AddOutputFilterByType DEFLATE application/x-javascript
+  AddOutputFilterByType DEFLATE application/xhtml+xml
+  AddOutputFilterByType DEFLATE application/xml
+  AddOutputFilterByType DEFLATE font/opentype
+  AddOutputFilterByType DEFLATE font/otf
+  AddOutputFilterByType DEFLATE font/ttf
+  AddOutputFilterByType DEFLATE image/svg+xml
+  AddOutputFilterByType DEFLATE image/x-icon
+  AddOutputFilterByType DEFLATE text/css
+  AddOutputFilterByType DEFLATE text/html
+  AddOutputFilterByType DEFLATE text/javascript
+  AddOutputFilterByType DEFLATE text/plain
+  AddOutputFilterByType DEFLATE text/xml
+
+  # Remove browser bugs (only needed for really old browsers)
+  BrowserMatch ^Mozilla/4 gzip-only-text/html
+  BrowserMatch ^Mozilla/4\.0[678] no-gzip
+  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
+  Header append Vary User-Agent
+</IfModule>
+
+<IfModule mod_expires.c>
+  ExpiresActive on
+
+# Perhaps better to whitelist expires rules? Perhaps.
+  ExpiresDefault                          "access plus 1 month"
+
+# cache.appcache needs re-requests in FF 3.6 (thx Remy ~Introducing HTML5)
+  ExpiresByType text/cache-manifest       "access plus 0 seconds"
+
+
+
+# Your document html
+  ExpiresByType text/html                 "access plus 1 month"
+
+# Data
+  ExpiresByType text/xml                  "access plus 0 seconds"
+  ExpiresByType application/xml           "access plus 0 seconds"
+  ExpiresByType application/json          "access plus 0 seconds"
+
+# RSS feed
+  ExpiresByType application/rss+xml       "access plus 1 hour"
+
+# Favicon (cannot be renamed)
+  ExpiresByType image/x-icon              "access plus 1 year" 
+
+# Media: images, video, audio
+  ExpiresByType image/gif                 "access plus 1 year"
+  ExpiresByType image/png                 "access plus 1 year"
+  ExpiresByType image/jpg                 "access plus 1 year"
+  ExpiresByType image/jpeg                "access plus 1 year"
+  ExpiresByType image/webp                "access plus 1 year"
+  ExpiresByType video/ogg                 "access plus 1 year"
+  ExpiresByType audio/ogg                 "access plus 1 year"
+  ExpiresByType video/mp4                 "access plus 1 year"
+  ExpiresByType video/webm                "access plus 1 year"
+
+# HTC files  (css3pie)
+  ExpiresByType text/x-component          "access plus 1 month"
+
+# Webfonts
+  ExpiresByType font/truetype             "access plus 1 year"
+  ExpiresByType font/opentype             "access plus 1 year"
+  ExpiresByType application/x-font-woff   "access plus 1 year"
+  ExpiresByType image/svg+xml             "access plus 1 year"
+  ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
+
+# CSS and JavaScript
+  ExpiresByType text/css                  "access plus 1 year"
+  ExpiresByType application/javascript    "access plus 1 year"
+  ExpiresByType text/javascript           "access plus 1 year"
+
+  <IfModule mod_headers.c>
+    Header append Cache-Control "public"
+    Header unset ETag
+    FileETag None
+  </IfModule>
+
+</IfModule>

docs/assets/manifest.json

@@ -0,0 +1,21 @@
+{
+  "name": "xxxxxxx",
+  "short_name": "xxxxxxx",
+  "icons": [
+    {
+      "src": "/images/static/app_192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/images/static/app_512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "/index.html",
+  "display": "standalone",
+  "theme_color": "#FFFFFF",
+  "background_color": "#FFFFFF",
+  "orientation": "portrait"
+}

docs/contact.html

@@ -0,0 +1 @@
+<!doctype html><html class="contact" lang="pl" dir="ltr"><head><link rel="dns-prefetch" href="//google-analytics.com"><link rel="preconnect" href="//fonts.gstatic.com/" crossorigin><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="description" content="description - contact"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="robots" content="index,follow"><meta name="theme-color" content="#ffffff"><meta name="msapplication-navbutton-color" content="#ffffff"><meta name="apple-mobile-web-app-status-bar-style" content="#ffffff"><meta content="telephone=no" name="format-detection"><title>title - contact</title><link rel="manifest" href="/assets/manifest.json"><link rel="icon" type="image/x-icon" href="/favicon.ico"><script defer="defer" src="./vendor/js/contact.2e9dd730285391ac05be.js"></script><link href="./vendor/css/contact.2e9dd730285391ac05be.css" rel="stylesheet"></head><body><div class="nav"><a href="./" title="index">index</a><a href="./about.html" title="about me">about me</a><a class="active" href="./contact.html" title="CONTACT">contact</a></div><h1>CONTACT</h1><img class="responsive" src="images/contact.jpg"></body></html>

docs/index.html

@@ -0,0 +1 @@
+<!doctype html><html class="index" lang="pl" dir="ltr"><head><link rel="dns-prefetch" href="//google-analytics.com"><link rel="preconnect" href="//fonts.gstatic.com/" crossorigin><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="description" content="description - index"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="robots" content="index,follow"><meta name="theme-color" content="#ffffff"><meta name="msapplication-navbutton-color" content="#ffffff"><meta name="apple-mobile-web-app-status-bar-style" content="#ffffff"><meta content="telephone=no" name="format-detection"><title>title - index</title><link rel="manifest" href="/assets/manifest.json"><link rel="icon" type="image/x-icon" href="/favicon.ico"><script defer="defer" src="./vendor/js/index.2e9dd730285391ac05be.js"></script><script defer="defer" src="./vendor/js/share.2e9dd730285391ac05be.js"></script><link href="./vendor/css/index.2e9dd730285391ac05be.css" rel="stylesheet"></head><body><div class="nav"><a class="active" href="./" title="index">index</a><a href="./about.html" title="about me">about me</a><a href="./contact.html" title="CONTACT">contact</a></div><h1>INDEX</h1><img class="responsive" src="images/index.jpg"></body></html>

docs/vendor/js/contact.2e9dd730285391ac05be.js

@@ -0,0 +1 @@
+!function(){"use strict";console.log("CONTACT")}();