Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 879
mpen Avatar asked Dec 10 '15 19:12

mpen


People also ask

How do I run a webpack locally?

To run the local installation of webpack you can access its binary version as node_modules/. bin/webpack . Alternatively, if you are using npm v5. 2.0 or greater, you can run npx webpack to do it.

How use webpack bundle JavaScript?

Bundling JavaScript the Webpack way You can bundle your JavaScript using the CLI command by providing an entry file and output path. Webpack will automatically resolve all dependencies from import and require and bundle them into a single output together with your app's script.

How do I run a webpack in node?

We can add webpack to npm scripts in package. json so as to ease our development process. Add "build": "webpack", to package. json and run the command npm run build .


2 Answers

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()
like image 61
Felix Kling Avatar answered Oct 21 '22 09:10

Felix Kling


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.

like image 27
mpen Avatar answered Oct 21 '22 11:10

mpen