来自webpack的重复CSS代码

Question

我正在创建一个组件库，我遇到了一个webpack问题，我似乎无法解决。问题是我希望能够单独使用组件。

所以我们假设Project A使用Button组件而Project 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';

一切都很顺利，直到Project 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')，而使用两者的项目只会捆绑一次。