Exportar e agrupar uma função usando webpack e chamando-a dentro da tag de script html

Question

Tenho tentado algo muito simples - exportar e agrupar (e babel transpilar) uma função usando webpack e chamá-la na tag de script da minha página html.

sample.js - que é empacotado usando webpack

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

Configuração do Webpack (versão = 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
    }

Achei que fosse tão fácil quanto adicionar os destinos librarye libraryTargetà configuração do webpack e então deveria ser capaz de chamar minha função como MyLibrary.sampleFunctionExported1().

Mas quando eu faço isso MyLibraryno console do meu navegador, ele exibe como abaixo e MyLibrary.sampleFunctionExported1()retorna um ... is not a functionerro

Tenho seguido sugestões em muitas dessas perguntas / respostas: resposta 1 , resposta 2 , resposta 3 e vários outros posts do blog, mas não funciona para mim de forma alguma.

Então, depois de passar tanto tempo, estou postando aqui esperando que alguém possa me ajudar a entender o que está errado.

Edição 1: Aqui está o arquivo gerado após o empacotamento do webpack : /public/js/sample.js

PS - Ignore o entry2.jsarquivo porque é um arquivo vazio, acabei de adicioná-lo para mostrar minha configuração e porque não tenho certeza se ter vários pontos de entrada pode causar esse problema que estou enfrentando atualmente.

Answer 1

Por causa de como você está exportando:

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

... sua MyLibraryvariável terá a forma:

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

Se você quiser que tenha a forma:

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

... você precisa fazer uma exportação nomeada em vez de uma exportação padrão:

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