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在根文件夹和单个命令中   在每个包目录中创建一个包* .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
    })
  ]
}

如何将捆绑编织到“app”中取决于你。

Answer 2

我在https://github.com/dan-kez/lerna-webpack-example

上写了一个示例存储库，展示了一起使用lerna和webpack的方法。

您可以在自述文件中阅读更多内容，但从较高的层次上讲，此存储库试图显示以下内容：

通过lerna拆分Monorepo代码
跨软件包构建Babel。
具有webpack配置的软件包，该软件包依赖于以下软件包 monorepo。
代码拆分和异步加载。
使用“外部”和代码拆分功能仅加载必要的代码
TypeScript和Javascript包的混合（以显示过渡版本状态）

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

2 个答案: