Webpack Export Feature

Question

I have several js files, and each file is a standonlone function with a unique name, and I want to pack all these files in one set. Therefore i am doing this code

module.exports = { entry: { app:[ './file1.js', './file2.js', './file3.js', './file4.js' ], }, output: { path: './dist/', filename: '[name].bundle.js' } }; 

which work, and I have the package file ".dist / app.bundle.js"

Now I have js code in the body of HTML that should call functions in the package. If I try to call the function "functionA" (that is, in file1.js file), I get this message in the browser console

 Uncaught ReferenceError: functionA is not defined 

The question is, how can I export my functions from a package in order to import it into my HTML code?

Answer 1

Exporting things from an entry point file does not make them accessible to the global scope. You have two options: either explicitly add functions to the window object, for example:

 window.functionA = functionA; 

Or configure the assembly to output as a library:

 // webpack.config.js - abridged module.exports = { output: { library: "myModule", libraryTarget: "umd" } }; 

I don’t know how the latter interacts with your entry point defined by an array of files - you may need to create one recording file ( main.js or something else) that imports all the functions, export them contained in the object, or something like that.