来自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')，并且消耗两者的项目将只捆绑它一次。