处理monorepo时如何正确使用lerna和webpack

Question

我正在构建一个monorepo，它将包含使用React构建的UI工具包的所有单个组件。

我使用lerna是因为我没有Monorepo / multi软件包配置的经验，现在我具有以下结构：

index.js
packages/
  pack1/
  pack2/

我想使用构建每个软件包，webpack但只想webpack.config.js在根文件夹中使用一个，并使用单个命令来创建一个pack*.dist.js在每个软件包目录中。

可能吗？有方向吗？

Answer 1

这个问题通常是开放式的，但这是一个开始。

我想用webpack构建每个软件包，但只想在根文件夹中使用单个webpack.config.js，并在每个软件包目录中使用单个命令创建pack * .dist.js。

可能吗？有方向吗？

是的，有可能。您需要列出pack1并pack2为entry您的webpack.config.js文件。您可能还希望将所有常见的第三方和内部依赖项捆绑在供应商捆绑中。

使用webpack配置，例如：

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
    })
  ]
}

您如何将捆绑在一起编织成“应用程序”取决于您。