How to execute a webpack module from a <script>?

Question

I've written an ES6 module that looks something like this:

export default function({makeCurrentVerUrl, verUrl, fileServer, downloadTokenType, appId}) {
    ...
}

When compiled by webpack, it looks something like this:

webpackJsonp([5,7],[
/* 0 */
/***/ function(module, exports) {

    'use strict';

    Object.defineProperty(exports, "__esModule", {
        value: true
    });

    exports.default = function (_ref) {
        var makeCurrentVerUrl = _ref.makeCurrentVerUrl;
        var verUrl = _ref.verUrl;
        var fileServer = _ref.fileServer;
        var downloadTokenType = _ref.downloadTokenType;
        var appId = _ref.appId;

        ...
    };

/***/ }
]);

Which is great, but I'm not sure how to run this file and call my default function.

I can include it,

<script src="/path/to/script.js"></script>

Which I believe will run it automatically, but how can I call the functions I've defined in it from the browser? require is not defined in my browser.

Answer 1

You can set output.library in the configuration. From the docs:

output.library
If set, export the bundle as library. output.library is the name.

Use this, if you are writing a library and want to publish it as single file.

output.libraryTarget
Which format to export the library:

"var" - Export by setting a variable: var Library = xxx (default)

"this" - Export by setting a property of this: this["Library"] = xxx

"commonjs" - Export by setting a property of exports: exports["Library"] = xxx

"commonjs2" - Export by setting module.exports: module.exports = xxx

"amd" - Export to AMD (optionally named)

"umd" - Export to AMD, CommonJS2 or as property in root

Default: "var"

Then you will be able to do

myLibrary()

Answer 2

So the easiest way to do this without changing output.library (assuming you don't want to globalize everything) is to just attach your needed functions to the window. e.g.

// entry-point.js
import foo from './scripts/foo.js';
window.foo = foo;

Or if you want to attach a whole bunch of stuff to the window (not just default), you can do something like:

Object.assign(window, require('./scripts/somelib.js'));

You can also take a look at bundle-loader, the built-in webpack feature require.context or dynamic import()s if you want to include some scripts at run-time.