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.

Maybe i miss something, do you mean that you want to publish your library package to npm, and users will `import` it? So why "I can only require non-JS files if I am using webpack"? Could you give an example? And about "I tried using multiple entry points" Have you considered the possibility that you don't need `webpack` - only `babel` will be enough? — Oleg Pro, Dec 28 '16 at 12:29
Yes I have considered only using babel. However if I require("./something.css") and don't use webpack in a project where I require("my-library"). If I run this it will not work. — Arwed Mett, Dec 28 '16 at 12:50
So you want to create a library which would be used without webpack? Ok. Did you tried it with single entry point? — Oleg Pro, Dec 28 '16 at 13:03
Have you seen this examples [webpack-library-example](https://github.com/kalcifer/webpack-library-example/tree/master/examples)? Will it solve your question? — Oleg Pro, Dec 28 '16 at 16:41
No, but it doesn't use a loader. E.g. require("./somethind.css"). How can I garanty that the css is loaded correctly? — Arwed Mett, Dec 28 '16 at 16:59
Hi Arwed Mett! Is it still actual for you? I just played with creating 'webpack` packages and finally I build library which incapsulates image and css in one JS file. It's possible to import it and use without `webpack` or `babel`. I've published this example to Github. Could you check it and tell me is it what you asked about? https://github.com/UsulPro/libpack — Oleg Pro, Jan 04 '17 at 19:50
Check https://github.com/atte-backman/ts-library-boilerplate/blob/master/src/app/services/postService.ts — nhaa123, Mar 16 '17 at 12:36

score 27 · Accepted Answer · answered Jan 05 '17 at 12:07

27

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

answered Jan 05 '17 at 12:07

Oleg Pro

2,323
1
15
23

So is it the case that the library images can only be used if they are inlined? – davesaus Apr 21 '17 at 15:49
@davesaus you can keep images in separated files. It depends on how are you going to use it then – Oleg Pro Apr 21 '17 at 15:56
2

What i need if i want App also to build with lib together? – Nikola Lukic Jan 12 '18 at 13:28
2

How do I get `import filename from "package/filename"`? and not `import {filename} from ...` by using this syntax? – HalfWebDev Sep 07 '21 at 10:43

score 5 · Answer 2 · answered Nov 08 '18 at 21:26

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
  },

How to bundle a library with webpack?

2 Answers2

Linked