How to expose a single entry point bundle as a library in webpack configuration

Question

I have a webpack.config.js file defined as module.exports = function (env, args) with different entry points. Now I want to add an entry point and expose it as a library. Calling webpacked code from outside (HTML script tag) says we can do

module.exports = {
  entry: './index.js',
  output: {
    path: './lib',
    filename: 'yourlib.js',
    libraryTarget: 'var',
    library: 'EntryPoint'
  }
};

But how do I restrict this to a specific entry point.

score 0 · Answer 1 · answered Nov 15 '22 at 10:00

You didn't mention the webpack version you are using. With version 5.75.0 you can achieve that with the following config. I am assuming 2 entry points in the example:

module.exports = {
  entry: {
    app: './index.js',
    lib: {
      filename: '[name].js',
      import: './lib/yourlib.js',
      library: {
        name: 'YourLibName',
        type: 'umd',
      },
    }
  },
  output: {
    path: './dist',
    filename: '[name].js',
    libraryTarget: 'umd'
  }
};

You can refer to webpack's documentation to explore the parameters available to configure library options per entry point.

With older versions of webpack you will have to create a separate webpack.config file to generate your library bundle.

How to expose a single entry point bundle as a library in webpack configuration

1 Answers1