webpackのCSSコードが重複しています

Question

コンポーネントライブラリを作成していますが、ウェブパックの問題が発生していますが、解決できないようです。問題は、コンポーネントを個別に使用できるようにすることです。

プロジェクトAがButtonコンポーネントを使用し、プロジェクトBがDropdownButtonを使用するとします。理想的には、DropdownButtonがコードベースにないように、プロジェクトAのButtonに関連するコードだけをインポートしたいと思っています。

現在、私はlibpackの各コンポーネントのwebpackでファイルを生成しています。ビルドが行われた後、だから私は、だから私はすべてのプロジェクトCになるまでよくあるプロジェクトA.

import Button from 'comps/lib/Button';

import 'comps/lib/Button.css';

でこのようにそれをインポートすることができ

lib - Button.js - Button.css - DropdownButton.js - DropdownButton.css

が残っていますButtonとDropdownButtonの両方が必要です。その後、両方をインポートすると、Button.cssとButton.jsコードが2回取得されます。

ご協力いただきまして誠にありがとうございます。

私は生産のために作成時にexternalsとその依存関係を定義することができ、各コンポーネントで

Answer 1

WebPACKの2.6.1を使用しています - それは、彼らが同梱されないことを保証します。もちろん

// webpack.config.js 

{ 
    ... 
    externals: isDev ? null : Object.keys(require('./package.json').dependencies)) 
} 

- あなたは利便性のためにすべてをバンドルすることができます開発する際、しかし消費のため実際のコンポーネントを構築するとき - 外観としてその依存関係をマーク。

あなたの例では、DropdownButtonはButtonをrequire('Button')とし、両方を消費するプロジェクトでは1回だけバンドルします。