使用 webpack、less-loader 和 extract-text-webpack-plugin 避免输出重复答案

【问题标题】：Avoiding output duplication using webpack, less-loader and extract-text-webpack-plugin使用 webpack、less-loader 和 extract-text-webpack-plugin 避免输出重复
【发布时间】：2015-10-10 16:28:34
【问题描述】：

我正在使用 webpack 来打包我的文件，包括 css（更少）。

它适用于 css 文件，但只要我在游戏中添加 less-loader，其他较少文件（常见文件）所需的文件就会在输出中复制。

我想我会做什么：

     |-------entry.js-------|
     |                      |

componentOne.js componentTwo.js
| |
one.less 两个.less
\ /
\ ----- common.less ---- /

webpack 对我的看法：

     |-------entry.js-------|
     |                      |

componentOne.js componentTwo.js
| |
one.less 两个.less
| |
common.less common.less

这会导致 common.less 在我的输出中根据需要重复多次。同样，如果没有 less-loader，common.css 在第二次需要时会被识别为同一个模块。

Here's a repo illustrating this

编辑：经过一番调查，从其他更少文件导入的更少文件似乎包含在更少的编译器中，而不是 webpack 需要系统。这样重复就有意义了。

EDIT2：避免这种情况的一种方法是让您的 common.less 文件不输出任何内容。还是有一些限制，比如：

.@{a} () {
  // rules...
}

【问题讨论】：

您能找到解决方案吗？

标签： less webpack

【解决方案1】：

最好将common.less 移动到使用CommonsChunkPlugin 的公共模块中。这样它就可以被 webpack 分块了。

【讨论】：

CommonChunkPlugin 似乎真的是为多入口点应用程序设计的。我不知道如何在我的情况下使用它，难道 less 编译器仍然内联导入的文件吗？

【解决方案2】：

@import 语法支持包含您的 Less 文件的功能，而无需通过 reference 关键字生成任何输出。

@import (reference) 'common.less';

我使用类似上面的方法来重用来自Bootstrap 的变量和mixin，即使它们被不同的JavaScript 文件多次imported 或require'd。 Less Import Options 文档更详细地描述了此功能和其他选项的限制。

【讨论】：