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

Question

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

我使用lerna，因为我有monorepo /多包配置没有经验，现在我有这样的结构：

index.js 
packages/ 
    pack1/ 
    pack2/ 

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

可能吗？任何方向？

Answer 1

这个问题是相当普遍的一个开放式的，但这里有一个开始。

我想建立每个包的WebPack但希望只使用一个单一的 在webpack.config.js根文件夹和一个命令 在每个包目录下创建一个包* .dist.js。

可能吗？任何方向？

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

凭借的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 
    }) 
    ] 
} 

你的包如何共同编织成一个“应用程序”是你。