How to bundle a library with webpack?

Question

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.

Answer 1

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