javascript - webpack 4 类型错误 : "Object(...) is not a function"

Question

我有一个简单的 js 文件，我正在尝试使用 webpack 4:

const CopyPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin');
//const ClosurePlugin = require('closure-webpack-plugin')
const path = require('path');

module.exports = env => {
    console.log("Building with env", env)
    const config = {
        entry: {
            index: './src/index.js',
            "network-mapper": './src/network-mapper/network-mapper.js'
        },
        externals: {
            'angular': 'angular',
            'cytoscape': 'cytoscape'
        },
        output: {
            filename: '[name].[contenthash].js',
            path: path.resolve(__dirname, 'dist'),
            libraryTarget: 'umd'
        },
        module: {
            rules: [
                {
                    test: /\.css$/,
                    use: ['style-loader', 'css-loader'],
                },
                {
                    test: /\.(html)$/,
                    use: {
                        loader: 'html-loader',
                    }
                },
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    //loader: 'babel-loader'
                }
            ]
        },
        plugins: [
            new CleanWebpackPlugin(),
            new HtmlWebpackPlugin({
                template: __dirname + '/src/public/index.html',
                filename: 'index.html',
                inject: 'body'
            }),
            new CopyPlugin([
                {from: __dirname + '/src/public'}
            ])
        ],
        optimization: {
            // We no not want to minimize our code.
            minimize: false
        }
    };
    config.mode = (env.development === 'false' ? 'production' : 'development')

    if (env.development === 'false') {
        // config.optimization = {
        //     concatenateModules: false,
        //     minimizer: [
        //         new ClosurePlugin({mode: 'AGGRESSIVE_BUNDLE'}, {
        //             // compiler flags here
        //             //
        //             // for debuging help, try these:
        //             //
        //             // formatting: 'PRETTY_PRINT'
        //             // debug: true,
        //             // renaming: false
        //         })
        //     ]
        // }
    }
    return config;
}

我的 Javascript 很简单，只有 1 个函数。如果我删除 import 就可以了和 export声明使其成为纯 js 并将其包含在 <script> 中标签

import {cytoscape} from "cytoscape";

export function networkMap() {
// TODO
    var createNetworkType = function (id, color, description) {
        return {
            "id": id,
            "label": color.charAt(0).toUpperCase() + color.slice(1).toLowerCase(),
            "description": description,
            "className": color.toLowerCase()
        }
...

但是，当我使用 webpack 4 对其进行 webpack 并将生成的脚本包含在 <script> 中时我得到的标签:
TypeError: "Object(...) is not a function"
这是导致它的原因 - 它是 webpack 生成代码的一部分:

scope.cytoscape = Object(cytoscape__WEBPACK_IMPORTED_MODULE_0__["cytoscape"])({
                container: scope.container,
                elements: scope.elements,
                style: scope.style,
                layout: scope.layout
            });

如何配置 webpack 以简单地创建一个可以包含在脚本标签中的 Javascript 文件？

Answer 1

导出不应该是函数表达式。它应该是一个对象。

module.exports = {}

不是

module.exports = () => {}

我见过人们使用函数，但不使用函数表达式。

module.exports = function(env) {
    return {};
}