webpack 構建后，bundle.js 中未定義導出的函數

Question

我有由 Webpack 管理的構建過程。 它捆綁了我的所有文件並生成了一個bundle.js文件。 很典型的圖案。

但是，當我在網頁中包含該文件bundle.js時，導出的默認函數未定義。 為什么我不能從網頁上的全局范圍訪問導出的函數？

這是我的 webpack 配置：

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    entry: './src/js/index.js',
    output: {
        path: path.resolve('dist'),
        filename: 'bundle.js',
    },
    performance: {
        hints: false,
    },
    resolve: {
        modules: ['node_modules', path.join(__dirname, 'src'), 'assets'],
    },
    module: {
        rules: [
            {
                test: /\.(sa|sc|c)ss$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader',
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                use: 'file-loader',
            },
        ],
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: `bundle.css`,
        }),
    ],
};

這是一個簡化的src/js/index.js ：

import util from './util';
import as dependency from 'external-library';
import EventEmitter from 'events';

/**
 * MyLibrary module
 * @module MyLibrary
 * @class
 * @param {MyLibraryOptions} options - Options to initialize the module with
 * @returns {Object} MyLibrary instance
 */
export default function MyLibrary(options) {
    if (!(this instanceof MyLibrary)) {
        return new MyLibrary(options);
    }
    
    //...Do a bunch of stuff.

}

目標是在網頁上包含bundle.js並在腳本標記中訪問，例如：

var instance = new MyLibrary({option_1: value, ...})

但是，當我這樣做時， MyLibrary始終是未定義的。

更新：

在 webpack 配置中添加library屬性后， MyLibrary不是未定義的，但我無法調用它。 現在是一個模塊。

更新 2 --> 解決方案：

module.exports = {
    entry: './src/js/index.js',
    output: {
        library: 'MyLibrary',
        libraryTarget: 'umd',
        libraryExport: 'default',
        path: path.resolve('dist'),
        filename: 'bundle.js',
   }
...

Answer 1

在 webpack 中，默認范圍不是全局的。 它包含匿名函數中的所有代碼。 要將您的庫公開到瀏覽器的全局范圍，請使用此答案。

你的 webpack 配置看起來像這樣：

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    entry: './src/js/index.js',
    output: {
        library: 'MyLibrary',
        path: path.resolve('dist'),
        filename: 'bundle.js',
    },
    performance: {
        hints: false,
    },
    resolve: {
        modules: ['node_modules', path.join(__dirname, 'src'), 'assets'],
    },
    module: {
        rules: [
            {
                test: /\.(sa|sc|c)ss$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader',
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                use: 'file-loader',
            },
        ],
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: `bundle.css`,
        }),
    ],
};