來自webpack的重複的CSS代碼

Question

我正在製作一個組件庫，並且我遇到了一個我似乎無法解決的webpack問題。問題是我想要單獨使用組件的能力。

假設項目A使用按鈕組件，項目B使用DropdownButton。理想情況下，我只想導入與項目A中的Button相關的代碼，以便DropdownButton不在代碼庫中。

目前，我正在爲lib文件夾中的每個組件生成帶有webpack的轉碼文件。構建完成後，所以我留下

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

這樣我就可以在項目A.導入像這樣

import Button from 'comps/lib/Button';

import 'comps/lib/Button.css';

一切都很好，直到項目C需要Button和DropdownButton。然後，當我導入兩個我得到Button.css和Button.js代碼兩次。

任何幫助，非常感謝。

我使用的WebPack 2.6.1

Answer 1

在每一個組件，您可以建立生產時定義其依賴externals - 這將保證他們不會被捆綁。

// webpack.config.js 

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

當然 - 進行開發時，你可以捆綁一切爲了方便，但是建立消費實際的組件時 - 紀念其依賴的外部。

在你的例子中 - DropdownButton將Button作爲require('Button')，並且消耗兩者的項目將只捆綁它一次。