如何从a执行webpack模块<script>?

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或root中的属性

默认值： "var"

然后你就可以做到

myLibrary()

Answer 2

因此，在不更改output.library （假设您不想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() 。