如何从<script>执行webpack模块？

Question

我写了一个看起来像这样的ES6模块:

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

当由webpack编译时,它看起来像这样:

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;

        ...
    };

/***/ }
]);

哪个好,但我不知道如何运行这个文件并调用我的默认函数.

我可以加入它,

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

我相信它会自动运行它,但是如何从浏览器中调用我在其中定义的函数？require未在我的浏览器中定义.

Answer 1

您可以output.library在配置中进行设置。从文档：

output.library
如果已设置，请将捆绑软件导出为库。output.library是名字。

如果要编写库并想将其发布为单个文件，请使用此选项。

output.libraryTarget
导出库的格式：

"var"-通过设置变量进行导出：（var Library = xxx默认）

"this" -通过设置以下属性导出： this["Library"] = xxx

"commonjs" -通过设置导出属性来导出： exports["Library"] = xxx

"commonjs2" -通过设置module.exports进行导出： module.exports = xxx

"amd" -导出到AMD（可选名称）

"umd" -导出到AMD，CommonJS2或根目录下的属性

默认： "var"

那你就可以做

myLibrary()

Answer 2

因此，在不进行更改的情况下执行此操作的最简单方法output.library（假设您不想全球化所有内容）是将所需的函数附加到window. 例如

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

或者，如果您想将一大堆东西附加到window（而不仅仅是default），您可以执行以下操作：

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

如果您想在运行时包含一些脚本，您还可以查看bundle-loader内置的 webpack 功能require.context或动态。import()