Fix library generation for Plone 5 (#72)

* Fix library generation for Plone 5

* Update changelog

.gitignore

@@ -36,4 +36,4 @@ src/plone.app.tiles/
 src/plone.scale/
 src/plone.tiles/
 var/
-src/collective/lazysizes/static/*
+src/collective/lazysizes/browser/static/

CHANGES.rst

@@ -1,8 +1,11 @@
 Changelog
 =========
 
-4.1.3 (unreleased)
-------------------
+4.1.2.1 (unreleased)
+--------------------
+
+- Set webpack ``output.libraryTarget`` to ``var`` and do not import the UMD version of lazysizes to avoid ``Mismatched anonymous define() module`` error in Plone 5 (refs. `#67 <https://github.com/collective/collective.lazysizes/issues/67>`_).
+  [thet, rodfersou]
 
 - Update Brazilian Portuguese and Spanish translations.
   [hvelarde]

webpack/app/lazysizes.js

@@ -1,3 +1,3 @@
 import 'lazysizes/plugins/print/ls.print.js';
 import 'lazysizes/plugins/twitter/ls.twitter.js';
-import 'lazysizes/lazysizes-umd.js';
+import 'lazysizes/lazysizes.js';

webpack/app/resources.pt

@@ -1,3 +1,3 @@
 <% for (let js in htmlWebpackPlugin.files.js) { %>
-  <script async tal:attributes="src <%= 'string:${view/site_url}/' + htmlWebpackPlugin.files.js[js] %>" />
+  <script async tal:attributes="src <%= 'string:${view/site_url}/' + htmlWebpackPlugin.files.js[js] %>"></script>
 <% } %>

webpack/package.json

@@ -1,10 +1,10 @@
 {
   "name": "lazysizes",
-  "version": "0.0.1",
+  "version": "4.1.2",
   "main": "app/lazysizes.js",
   "scripts": {
     "build": "./node_modules/.bin/webpack -p",
-    "debug": "./node_modules/.bin/webpack --watch",
+    "debug": "NODE_ENV=debug ./node_modules/.bin/webpack --watch",
     "watch": "./node_modules/.bin/webpack -p --watch",
     "test": "NODE_ENV=testing ./node_modules/.bin/karma start --single-run"
   },
@@ -26,6 +26,6 @@
   "license": "GPL-2.0",
   "dependencies": {
     "lazysizes": "4.1.2",
-    "sc.recipe.staticresources": "simplesconsultoria/sc.recipe.staticresources#1.0b1"
+    "sc-recipe-staticresources": "simplesconsultoria/sc.recipe.staticresources#1.1b5"
   }
 }

webpack/webpack.config.js

@@ -1,68 +1,23 @@
-const HtmlWebpackPlugin = require('html-webpack-plugin')
+const makeConfig = require('sc-recipe-staticresources');
 
-// get partial prefix of latest commit in webpack directory
-const childProcess = require('child_process');
-const gitCmd = 'git rev-list -1 HEAD --abbrev-commit $(pwd)'
-const gitHash = childProcess.execSync(gitCmd).toString().substring(0, 7);
 
-// clean up old script
-const path = `${__dirname}/../src/collective/lazysizes/browser/static`
-childProcess.execSync(`rm -f ${path}/lazysizes-*`);
+module.exports = makeConfig(
+  // name
+  'collective.lazysizes',
 
-module.exports = {
-  entry: [
-    './app/lazysizes-icon.png',
-    './app/lazysizes.js',
-  ],
-  output: {
-    filename: `lazysizes-${gitHash}.js`,
-    library: 'lazysizes',
-    libraryTarget: 'umd',
-    libraryExport: 'default',
-    path: path,
-    publicPath: '++resource++collective.lazysizes/',
-  },
-  module: {
-    rules: [{
-      test: /\.js$/,
-      exclude: /(\/node_modules\/|test\.js$|\.spec\.js$)/,
-      use: 'babel-loader',
-    }, {
-      test: /.*\.(gif|png|jpe?g)$/i,
-      use: [
-        {
-          loader: 'file-loader',
-          options: {
-            name: '[path][name].[ext]',
-            context: 'app/',
-          }
-        },
-        {
-          loader: 'image-webpack-loader',
-          query: {
-            mozjpeg: {
-              progressive: true,
-            },
-            pngquant: {
-              quality: '65-90',
-              speed: 4,
-            },
-            gifsicle: {
-              interlaced: false,
-            },
-            optipng: {
-              optimizationLevel: 7,
-            }
-          }
-        }
-      ]
-    }]
+  // shortName
+  'lazysizes',
+
+  // path
+  `${__dirname}/../src/collective/lazysizes/browser/static`,
+
+  //publicPath
+  '++resource++collective.lazysizes/',
+
+  //callback
+  function(config, options) {
+    config.entry.unshift(
+      './app/lazysizes-icon.png',
+    );
   },
-  plugins: [
-    new HtmlWebpackPlugin({
-      inject: false,
-      filename: 'resources.pt',
-      template: 'app/resources.pt',
-    })
-  ]
-}
+);