Webpackを使用してライブラリをパッケージ化するときのlibフォルダーとdistフォルダーの違いは何ですか？
最初のパッケージ（reactコンポーネント）をnpmに公開したのですが、libディレクトリとdistの違いを理解するのに問題があります。
現在、私はlibとdistの両方を生成していますが、私のパッケージの「メイン」は、webpackを使用してビルドされ、UMDとして出力されたdist縮小化されたjsファイルを指しています。 libフォルダーはbabelを使用して構築され、srcを取得してlibに出力します。
Distフォルダーには、[unminified/minified] .jsファイルと[unminified/minified] .cssファイルの両方が含まれています。
私の主な混乱はlibフォルダーです。そこからのインポートはsrc -> libは、scss参照がまだ存在し、scssファイルも変換されないことを意味します。
CSSモジュール（css-loader、styles-loader、postcss-loaderなど）を使用してCSSファイルを生成しますが、ここで混乱が生じます。libを生成するためにwebpackを使用する必要もないでしょう。 scssファイルと見なされるフォルダー/インポート参照をcssに変換する必要がありますか？
libとdistの両方を使用するつもりですか、それともUMDビルドはdistにlibフォルダーを持つのと同じ目的を満たしていますか？
jsファイル内でCSSモジュールを使用しているときにlibフォルダーの生成に関する情報を見つけることができず、srcのフォルダー構造と同じフォルダー構造を維持しているため、これを実現する方法を両方持っているはずです（まだdistを生成していますか？
通常、distフォルダーは、ユーザーがパッケージ管理を使用していない場合に使用できるUMDを出荷するためのものです。 libフォルダーは_package.json_ mainが指すものであり、npmを使用してパッケージをインストールするユーザーはそれを直接使用します。 libとは対照的にsrcの唯一の用途は、Babelとwebpackを使用してソースを変換することです。これは、ほとんどのビルドプロセスが_node_modules_。
スタイルのインポートの処理に関する限り、エクスポートするソースjsにscssまたはcssファイルをインポートしないことをお勧めします。これは、ノードがデフォルトでそのようなスタイルをインポートできないためです。コンポーネントをデモする例がある場合は、そこにスタイルをインポートするのが理にかなっています。一般的なパターンは、distフォルダーに縮小化されたcssと非縮小化されたcssを公開することです。ドキュメントでは、好みの手法を使用してcssファイルを明示的にインポートするようコンシューマーに指示します。例が必要な場合は、このアプローチを redux bug reporter で使用しました。お役に立てば幸いです。
これを行う方法を見つけたと思います。 babelを実行するときにwebpackローダーを使用できるようにするbabelプラグインがあります（ babel-plugin-webpack-loaders ）。したがって、CSSマッピングはjsファイル内にインライン化され、使用されるマッピングハッシュもdistのビルド時に使用されるものと同じです。わーい！
一般にlibはパッケージに含まれているライブラリを指し、一方distはプロジェクトの配布ファイルです。例として、一連のJavaScriptを記述し、jquery（これはlibです）を含めることができます。それらがすべてバンドルされると、単一のdistファイルができます。