I am structuring a monorepo that will contain all the single ponents 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 mand to create a pack*.dist.js in every package directory.

Is it possible? Any direction?

I am structuring a monorepo that will contain all the single ponents 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 mand to create a pack*.dist.js in every package directory.

Is it possible? Any direction?

• javascript
• webpack
• lerna

2 Answers 2

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 mand 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 mon 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: 'mon',
        chunks: Object.keys(entries),
        minChunks: Object.keys(entries).length
    })
  ]
}

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

I wrote an example repository showcasing a method for using lerna and webpack together here https://github./dan-kez/lerna-webpack-example

You can read more in the README but at a high level this repo seeks to show case the following:

• Monorepo code splitting via lerna

• Babel building across packages.

• A package with a webpack config that has dependencies on packages in the monorepo.

• Code splitting and asynchronous loading.

• Using "external" & code splitting to only load the code necessary

• A mix of TypeScript and Javascript packages (to show a transitional state)