fixing mutations + adding dev/prod setup webpack + fixing loading of …

…multiple pages through infinite scroll

package.json

@@ -9,13 +9,17 @@
     }
   ],
   "scripts": {
-    "build": "webpack"
+    "build:dev": "webpack-cli -w --config webpack.dev.js",
+    "build:prod": "webpack-cli --config webpack.prod.js"
   },
   "dependencies": {
     "intersection-observer": "^0.11.0"
   },
   "devDependencies": {
+    "clean-webpack-plugin": "^3.0.0",
+    "source-map-loader": "^1.0.1",
     "webpack": "^4.44.1",
-    "webpack-cli": "^3.3.12"
+    "webpack-cli": "^3.3.12",
+    "webpack-merge": "^5.1.1"
   }
 }

src/index.js

@@ -16,14 +16,16 @@ if (!'IntersectionObserver' in window &&
 
             root: document,
             rootMargin: `${viewportHeight}px 0px ${viewportHeight}px 0px`,
-            threshold: 0.5
+            threshold: 0.1
         });
 
         // finding lazy loadable images
-        let targets = document.querySelectorAll('[data-flat-lazy-load-image][data-loaded="0"]');
+        let targets = document.querySelectorAll('[data-flat-lazy-load-image="true"][data-loaded="0"]');
 
         // adding to intersect observer
         targets.forEach(function(target) {
+
+            target.setAttribute('data-observing', true);
             intersectObserver.observe(target);
         });
 

src/mutations.js

@@ -17,7 +17,9 @@ module.exports = function observeMutations(observer) {
 
                         let image = node.querySelector('img');
 
-                        if (typeof image !== 'undefined') {
+                        if (image !== null && false === image.hasAttribute('data-observing')) {
+                            console.log(image);
+                            image.setAttribute('data-observing', true);
                             observer.observe(image);
                         }
                     });

webpack.dev.js

@@ -0,0 +1,25 @@
+const path  = require('path');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+
+module.exports = {
+    entry: './src/index.js',
+    mode: 'development',
+    output: {
+        filename: 'flat-lazy.js',
+        path: path.resolve(__dirname, 'js'),
+    },
+
+    // enable sourcemaps for debugging webpack's output.
+    devtool: "source-map",
+
+    module: {
+        rules: [
+            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
+            { test: /\.js$/, loader: 'source-map-loader', enforce: 'pre' }
+        ]
+    },
+
+    plugins: [
+        new CleanWebpackPlugin(),
+    ]
+};

webpack.prod.js

@@ -0,0 +1,8 @@
+const { merge } = require('webpack-merge');
+const dev       = require('./webpack.dev.js');
+
+module.exports = merge(dev, {
+
+  mode: 'production',
+  devtool: false
+});