How to properly use lerna and webpack when dealing with a monorepo

Question

I am structuring a monorepo that will contain all the single components of a UI kit built with React.

I am using lerna because I have no experience with monorepo/multi packages configuration, now I have this structure:

index.js
packages/
  pack1/
  pack2/

I want to build every package with webpack but want to use only a single webpack.config.js in the root folder and a single command to create a pack*.dist.js in every package directory.

Is it possible? Any direction?

Answer 1

The question is rather general an open-ended, but here's a start.

I want to build every package with webpack but want to use only a single webpack.config.js in the root folder and a single command to create a pack*.dist.js in every package directory.

Is it possible? Any direction?

Yes, its possible. You need to list pack1 and pack2 as an entry in your webpack.config.js file. You probably want to bundle all common third party and in-house dependencies in a vendor bundle too.

With a webpack config such as:

let entries = {
  pack1: 'path/to/entry/point/pack1',
  pack2: 'path/to/entry/point/pack2'
};

export default {
  entry: { ...entries },
  module: {
    rules: [
      {
        // ... usual rule config props
        include: [
          '/path/to/pack1/src-for-rule',
          '/path/to/pack2/src-for-rule'
        ]
      }
    ]
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        chunks: Object.keys(entries),
        minChunks: (module) => {
            return /node_modules/.test(module.context);
        }
    }),
    new webpack.optimize.CommonsChunkPlugin({
        name: 'common',
        chunks: Object.keys(entries),
        minChunks: Object.keys(entries).length
    })
  ]
}

How you weave together the bundles into an "app" is up to you.