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.

Chronologist

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? – Pharisee

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

So you want to create a library which would be used without webpack? Ok. Did you tried it with single entry point? – Pharisee

yes, but that's basically my question how to do that. – Chronologist

Have you seen this examples webpack-library-example? Will it solve your question? – Pharisee

No, but it doesn't use a loader. E.g. require("./somethind.css"). How can I garanty that the css is loaded correctly? – Chronologist

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? github.com/UsulPro/libpack – Pharisee

that was exactly what I was looking for, thanks – Chronologist

Check github.com/atte-backman/ts-library-boilerplate/blob/master/src/… – Ballance

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

Pharisee

So is it the case that the library images can only be used if they are inlined? – Abduce

@Abduce you can keep images in separated files. It depends on how are you going to use it then – Pharisee

What i need if i want App also to build with lib together? – Courser

How do I get import filename from "package/filename"? and not import {filename} from ... by using this syntax? – Competence

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

Crowning