[SOLVED] How to bundle a library with webpack?

How to bundle a library with webpack?

I want to create a frontend library. Therefore I want to use webpack. I especially like the css and image loader. However I can only require non-JS files if I am using webpack. Because I am building a library, I cannot garanty that the user of my library will too.

Is there I way to bundle everything into a UMD module to publish it? I tried using multiple entry points, however I cannot require the module then.

Solution

You can find good guide for creating libraries in Webpack 2.0 documentation site. That's why I use ver 2 syntax in webpack.config.js for this example.

Here is a Github repo with an example library.

It builds all files from src/ (js, png and css) into one JS bundle which could be simply required as an umd module.

for that we need to specify the follow settings in webpack.config.js:

output: {
    path: './dist',
    filename: 'libpack.js',
    library: 'libpack',
    libraryTarget:'umd'
},

and package.json should have:

"main": "dist/libpack.js",

Note that you need to use appropriate loaders to pack everything in one file. e.g. base64-image-loader instead of file-loader