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

此答案未解决OP的确切问题，但突出了引起该错误的一个潜在原因。关于Object(...) is not a function，我在使用CommonJS模块时遇到了该错误当我导出函数调用的结果而不是对函数本身的引用时，使用Webpack。以下是将导致此错误的代码示例。

module.js

function Init() {
    // function body here...
}

exports.Init = Init();

main.js

import { Init } from 'module.js'
Init();

如果将module.js中的导出更改为以下代码，则可以解决此问题。

exports.Init = Init;

Answer 2

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

module.exports = {}

不是

module.exports = () => {}

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

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

webpack 4 TypeError：“ Object（...）不是函数”

2 个答案: