Skip to content

Instantly share code, notes, and snippets.

@dreyescat

dreyescat/index.html

Created December 18, 2015 18:02
Show Gist options
  • Save dreyescat/c3fd66ea0f7e97ba5c21 to your computer and use it in GitHub Desktop.
Save dreyescat/c3fd66ea0f7e97ba5c21 to your computer and use it in GitHub Desktop.
Download ZIP
Webpack config to expose bundle in a variable in the global context
Raw
index.html
<html>
<head>
</head>
<body>
<script src="lib/yourlib.js"></script>
<script>
window.onload = function () {
EntryPoint.run();
};
</script>
</body>
</html>
Raw
index.js
module.exports = {
run: function () {
console.log('run from library');
}
};
Raw
package.json
{
"name": "test-webpack-library",
"version": "1.0.0",
"description": "",
"main": "./lib/yourlib.js",
"scripts": {
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "MIT"
}
Raw
webpack.config.js
var webpack = require('webpack');
module.exports = {
entry: './index.js',
output: {
path: './lib',
filename: 'yourlib.js',
libraryTarget: 'var',
library: 'EntryPoint'
}
};
@caroso1222
Copy link

caroso1222 commented May 27, 2018 •
edited
Loading

I got this working with the following config:

module.exports = {
  entry: './index.js',
  output: {
    path: './lib',
    filename: 'yourlib.js',
    libraryTarget: 'umd',
    library: 'YourLibraryName',
    umdNamedDefine: true,
	libraryExport: 'default'
  }
};

The libraryExport is needed if you want to expose the default export of your module, but you can set it a named export as well. In this case I had an export default class Foo that I wanted to expose, so I just set the export to default.

See more information about the output configs here.

@aleksailosey
Copy link

@caroso1222 Thanks! Your solution helped me out

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment