Bundling node project for Web to save module output as global Js variable

Question

Our project looks to take several files with a couple of node dependencies, and bundle them into one file with one entry point.

/src 
   -entry.js
   -f1.js
   -f2.js
   -f3.js

The output of the bundle/function should be to set a global variable in a browser. In short, end result needs this to happen:

var _webVar = () => {return OBJECT_STUFF()} //set web global scope var
_webVar.init({config:{...}); //run the init function - done by client in tag manager/website code

So we can access _webVar from the global scope and let it do its thing. The end goal is to have this file stored in our CDN and clients simply add the source tag to their site for it to work.

Hoping to get an idea on best ways to integrate webpack into this build pipeline. Thanks.

score 0 · Accepted Answer · answered Apr 02 '20 at 23:12

My approach was wrong - overthinking the cause. A simple solution in the end. The idea isn't to output the variable by some fancy webpack magic, but you can just set the global in the code and have it execute when bundled.

Webpack.config.js can be as light as:

module.exports = {
entry: './src/index.js',
output: {
    filename: 'webvar-webpack-build.js',
    path: path.join(__dirname + '/build'),
},
resolve: {
    extensions: ['.js'],
    plugins: [],
},

};

ie. Instead of expecting the bundled code to run and output in OBJECT_STUFF()

var _webVar = () => {return OBJECT_STUFF()}

Inside the bundled webpack function OBJECT_STUFF() you set window["_webVar"]

This most accurately showed what i needed. Expose javascript globals bundled via webpack

Bundling node project for Web to save module output as global Js variable

1 Answers1