避免输出重复使用webpack，较少的加载和提取-文本webpack-插件

Question

我用webpack来捆绑我的文件，包括css (更少)。

它可以很好地处理css文件，但是一旦我在游戏中添加了较少的加载程序，其他更少的文件(常见的文件)所需的文件就会在输出中被复制。

我认为我所做的：

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

componentOne.js成品油制得componentTwo.js

商品-商品

 /T1381-1991商品 one.less的价格、商品价格、商品价格等

商业、金融、商业、金融、金融、商业、金融、金融等行业的商品、商品、商业、金融等行业的商品、商业、金融、金融等行业的商品、商品、商业、金融、金融、商业、金融等领域的商业、商业、金融等

webpack认为我做什么：

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

componentOne.js成品油制得componentTwo.js

商品-商品

 /T1381-1991商品 one.less的价格、商品价格、商品价格等

商品-商品

common.less

这导致common.less在我的输出中被重复了很多次，这是必要的。同样，如果没有更少的加载程序，则在第二次需要时，common.css被识别为相同的模块。

这里有一个回购程序说明了这一点

编辑:经过一些调查，似乎从其他较少的文件导入较少的文件是由较少的编译器，而不是webpack的要求系统。这样，重复就有意义了。

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

​

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

​

Answer 1

@进口语法支持在不通过reference关键字生成任何输出的情况下包含较少的文件的能力。

@import (reference) 'common.less';

我使用上面这样的内容来重用来自引导的变量和混合器，即使它们被不同的JavaScript文件多次使用import编辑或required。减去进口选项文档更详细地描述了这个特性和其他选项的局限性。

Answer 2

最好使用common.less将CommonsChunkPlugin移动到公共模块中。这样，webpack就可以把它砌成块了。