Exportar y empaquetar una función usando webpack y llamarla dentro de la etiqueta de script html

Question

He estado probando algo muy simple: exportar y agrupar (y transpilar babel) una función usando webpack y luego llamarla en la etiqueta de script de mi página html.

sample.js, que se incluye con webpack

export default function sampleFunctionExported1(){
    console.log("sampleFunctionExported1");
}

Configuración de paquete web (versión = 4.44.1)

module.exports = (env, arguments) => {
    entry: {
            main: ['./assets/js/sample.js', './assets/css/main.scss'],
            entry2: ['./assets/js/entry2.js', './assets/css/entry2.scss']
    },
    output: {
        path: path.join(__dirname, '../public/js'),
        filename: '[name].js',
        library: 'MyLibrary',
        libraryTarget: 'var',

        // some additional configs/options that I have tried          
        // libraryTarget: 'window', // tried with this option, it does not work
        // libraryTarget: 'umd',  // tried with this option, it does not work
        // libraryExport: 'default', // tried with this option, it does not work
    }

Pensé que era tan fácil como agregar los destinos libraryy libraryTargeta la configuración del paquete web y luego debería poder llamar a mi función como MyLibrary.sampleFunctionExported1().

Pero cuando lo hago MyLibraryen la consola de mi navegador, se muestra a continuación y MyLibrary.sampleFunctionExported1()devuelve el ... is not a functionerror

He seguido sugerencias en muchas de estas preguntas / respuestas: respuesta 1 , respuesta 2 , respuesta 3 y varias otras publicaciones de blog, pero no me funciona en absoluto.

Entonces, después de pasar tanto tiempo, lo publico aquí con la esperanza de que alguien pueda ayudarme a comprender qué está mal.

Edición 1: aquí está el archivo generado después de la agrupación del paquete web : /public/js/sample.js

PD: ignore el entry2.jsarchivo ya que es un archivo vacío, lo acabo de agregar para mostrar mi configuración y porque no estoy seguro de si tener varios puntos de entrada puede causar este problema al que me enfrento actualmente.

Answer 1

Por cómo estás exportando:

export default function sampleFunctionExported1(){
    console.log("sampleFunctionExported1");
}

... tu MyLibraryvariable va a tener la forma:

{
  default: function() { ... }
}

Si, en cambio, desea que tenga la forma:

{
  sampleFunctionExported1: function() { ... }
}

... necesita hacer una exportación con nombre en lugar de una exportación predeterminada:

export function sampleFunctionExported1() {
  console.log("sampleFunctionExported1");
}