monorepoを扱うときにlernaとwebpackを正しく使う方法

Question

Reactで構築されたUIキットのすべての単一コンポーネントを含むモノレポを構成しています。

私はmonorepo /マルチパッケージの構成での経験がないので、私は今、私はこのような構造を持っている、lernaを使用しています：

index.js 
packages/ 
    pack1/ 
    pack2/ 

私はwebpackを持つすべてのパッケージをビルドしたいが、唯一の単一webpack.config.jsを使用したいですルートフォルダと単一のコマンドを使用して、すべてのパッケージディレクトリにpack*.dist.jsを作成します。

それは可能ですか？どんな方向に？

Answer 1

質問はかなり一般的ですが、ここでは始まりです。

私はWebPACKの持つすべてのパッケージをビルドしたいが、すべてのパッケージディレクトリにパック*の.dist.jsを作成 にルートフォルダと単一のコマンドでのみ 単一webpack.config.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 
    }) 
    ] 
} 

はあなた次第です。