Export one of Webpack entry points as a library

Question

I have Webpack configuration for transpiled app:

entry: {
    'polyfill': './app/polyfill.js',
    'lib': './app/lib.js',
    'main': './app/main.js'
},
output: {
    path: './bundles',
    filename: '[name].js',
    sourceMapFilename: '[name].map'
},
...

I would like to have polyfill and main to be loaded from <script> tag in browser, and lib to be exported as CommonJS library.

lib is used by Node backend but contains some of app modules, so it is built alongside with other entry points). The application is being transpiled, so it is not possible to just require modules from ./app in Node.

What are the options here? Is using separate Webpack configs and separate Webpack runs the only one?

Answer 1

I would say it is better to separate the lib from apps webpack config. Since the lib could be used by both of the modules (front-end, and backend), it could be a library which can be used at both ends.

To create a library with webpack, you can use with the config below,

 entry: { lib: './app/lib' },
 output: {
    path: __dirname + '/lib', // path to output
    filename: outputFile, // library file name
    library: libraryName, // library name
    libraryTarget: 'umd', // the umd format
    umdNamedDefine: true // setting this to true will name the AMD module
  },

This is discussed here in detail.