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

Question

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

我正在使用 lerna因为我没有配置 monorepo/multi packages 的经验，所以现在我有这样的结构:

index.js
packages/
  pack1/
  pack2/

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

这可能吗？有什么方向吗？

Answer 1

这个问题是相当笼统的开放式问题，但这是一个开始。

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?

是的，这是可能的。您需要在 webpack.config.js 文件中将 pack1 和 pack2 列为 entry。您可能还想将所有常见的第三方和内部依赖项捆绑在 vendor bundle 中。

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

如何将 bundle 编织成一个“应用程序”由您决定。