How to bundle a library with webpack?

javascript webpack umd
Arwed Mett picture Arwed Mett · Dec 28, 2016 · Viewed 30.7k times · Source

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

Answer

Oleg Pro picture Oleg Pro · Jan 5, 2017

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

Related questions

Webpack 4 universal library target

According to the Webpack 4 documentation, if I specify libraryTarget: 'umd' it should result in the following output: (function webpackUniversalModuleDefinition(root, factory) { if(typeof exports === 'object' && typeof module === 'object') module.exports = factory(); else if(typeof define === 'function' && …

Read More
Getting Unexpected Token Export

I am trying to run some ES6 code in my project but I am getting an unexpected token export error. export class MyClass { constructor() { console.log("es6"); } }

Read More
Correct path for img on React.js

I have some problem with my images on my react project. Indeed I always thought that relative path into src attribute was built on the files architecture Here my files architecture: components file1.jsx file2.jsx file3.jsx container img …

Read More