Unable to load with webpack

[fireartist]

Hi, I'm unable to get webpack to generate appropriate .js files.

I've added to package.json the following:

  "dependencies": {
    "grunt-webpack": "^3.1.3",
    "webpack": "^4.23.1"
  }

I've added to Gruntfile.js the following:

const path = require('path');

module.exports = function(grunt) {
        grunt.initConfig({
                pkg: grunt.file.readJSON('package.json'),
                webpack: {
                        dist: {
                                entry: {
                                        'spin':  path.resolve(__dirname, 'src/spin.js'),
                                        'ladda': path.resolve(__dirname, 'src/ladda.js')
                                },
                                output: {
                                        filename: '[name].min.js',
                                        path: path.resolve(__dirname, 'dist'),
                                        publicPath: "/static/"
                                }
                        }
                }
        });
        grunt.loadNpmTasks('grunt-webpack');
        grunt.registerTask('default',['webpack']);
}

File src/spin.js contains import {Spinner} from 'spin.js';

File src/ladda.js contains import * as Ladda from 'ladda';

I then run the grunt command.

My browser is successfully loading both /static/spin.min.js and /static/ladda.min.js.

If I try to reference Ladda from in-page JS, I get a JS error Ladda is not defined.

The only reference to Ladda in the generated dist/ files is in the copyright comment.

The contents of dist/ladda.min.js are:

!function(t){var e={};function n(r){if(e[r])return e[r].exports;var i=e[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(r,i,function(e){return t[e]}.bind(null,i));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="/static/",n(n.s=2)}([function(t,e,n){"use strict";n.d(e,"a",function(){return o});var r=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++)for(var i in e=arguments[n])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t},i={lines:12,length:7,width:5,radius:10,scale:1,corners:1,color:"#000",fadeColor:"transparent",animation:"spinner-line-fade-default",rotate:0,direction:1,speed:1,zIndex:2e9,className:"spinner",top:"50%",left:"50%",shadow:"0 0 1px transparent",position:"absolute"},o=function(){function t(t){void 0===t&&(t={}),this.opts=r({},i,t)}return t.prototype.spin=function(t){return this.stop(),this.el=document.createElement("div"),this.el.className=this.opts.className,this.el.setAttribute("role","progressbar"),s(this.el,{position:this.opts.position,width:0,zIndex:this.opts.zIndex,left:this.opts.left,top:this.opts.top,transform:"scale("+this.opts.scale+")"}),t&&t.insertBefore(this.el,t.firstChild||null),function(t,e){var n=Math.round(e.corners*e.width*500)/1e3+"px",r="none";!0===e.shadow?r="0 2px 4px #000":"string"==typeof e.shadow&&(r=e.shadow);for(var i=function(t){for(var e=/^\s*([a-zA-Z]+\s+)?(-?\d+(\.\d+)?)([a-zA-Z]*)\s+(-?\d+(\.\d+)?)([a-zA-Z]*)(.*)$/,n=[],r=0,i=t.split(",");r<i.length;r++){var o=i[r],s=o.match(e);if(null!==s){var a=+s[2],l=+s[5],u=s[4],d=s[7];0!==a||u||(u=d),0!==l||d||(d=u),u===d&&n.push({prefix:s[1]||"",x:a,y:l,xUnits:u,yUnits:d,end:s[8]})}}return n}(r),o=0;o<e.lines;o++){var u=~~(360/e.lines*o+e.rotate),d=s(document.createElement("div"),{position:"absolute",top:-e.width/2+"px",width:e.length+e.width+"px",height:e.width+"px",background:a(e.fadeColor,o),borderRadius:n,transformOrigin:"left",transform:"rotate("+u+"deg) translateX("+e.radius+"px)"}),p=o*e.direction/e.lines/e.speed;p-=1/e.speed;var c=s(document.createElement("div"),{width:"100%",height:"100%",background:a(e.color,o),borderRadius:n,boxShadow:l(i,u),animation:1/e.speed+"s linear "+p+"s infinite "+e.animation});d.appendChild(c),t.appendChild(d)}}(this.el,this.opts),this},t.prototype.stop=function(){return this.el&&("undefined"!=typeof requestAnimationFrame?cancelAnimationFrame(this.animateId):clearTimeout(this.animateId),this.el.parentNode&&this.el.parentNode.removeChild(this.el),this.el=void 0),this},t}();function s(t,e){for(var n in e)t.style[n]=e[n];return t}function a(t,e){return"string"==typeof t?t:t[e%t.length]}function l(t,e){for(var n=[],r=0,i=t;r<i.length;r++){var o=i[r],s=u(o.x,o.y,e);n.push(o.prefix+s[0]+o.xUnits+" "+s[1]+o.yUnits+o.end)}return n.join(", ")}function u(t,e,n){var r=n*Math.PI/180,i=Math.sin(r),o=Math.cos(r);return[Math.round(1e3*(t*o+e*i))/1e3,Math.round(1e3*(-t*i+e*o))/1e3]}},,function(t,e,n){"use strict";n.r(e);n(0);
/*!
 * Ladda
 * http://lab.hakim.se/ladda
 * MIT licensed
 *
 * Copyright (C) 2018 Hakim El Hattab, http://hakim.se
 */}]);

[Theodore Brown]

Are you trying to generate global variables for the libraries so they can be used in a JavaScript file without being imported? If so, I think you need to use the output.library Webpack option to specify a name for the global. Something like this:

{
    entry: {
        Spinner: path.resolve(__dirname, 'src/spin.js'),
        Ladda: path.resolve(__dirname, 'src/ladda.js'),
    },
    output: {
        filename: '[name].min.js',
        path: path.resolve(__dirname, 'dist'),
        library: '[name]',
        publicPath: "/static/"
    }
}

I haven't tested this though, so I can't guarantee it will work. Personally I've switched all my code to use ES6 imports in my main JavaScript/TypeScript file, which can then be compiled via Webpack or Rollup into a single bundle. That makes things a lot simpler. 😃

[Gaurav Pandey]

Are you trying to generate global variables for the libraries so they can be used in a JavaScript file without being imported? If so, I think you need to use the output.library Webpack option to specify a name for the global. Something like this:

{
    entry: {
        Spinner: path.resolve(__dirname, 'src/spin.js'),
        Ladda: path.resolve(__dirname, 'src/ladda.js'),
    },
    output: {
        filename: '[name].min.js',
        path: path.resolve(__dirname, 'dist'),
        library: '[name]',
        publicPath: "/static/"
    }
}

I haven't tested this though, so I can't guarantee it will work. Personally I've switched all my code to use ES6 imports in my main JavaScript/TypeScript file, which can then be compiled via Webpack or Rollup into a single bundle. That makes things a lot simpler. 😃

This does not solve the issue. Ladda is still not defined.
I'm using webpack to bundle my js.