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. 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.

Thanks in advance

Solution 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

Solution 2

The comment written by @OlegPro is very helpful. I suggest every one to read this article for explanation of how these stuff work

http://krasimirtsonev.com/blog/article/javascript-library-starter-using-webpack-es6

You need the following for sure if you want to be able to import the bundle file in your project

  output: {
    path: path.resolve(__dirname, myLibrary),
    filename: 'bundle.js',
    library: "myLibrary",   // Important
    libraryTarget: 'umd',   // Important
    umdNamedDefine: true   // Important
  },