webpack是目前比较流行，通用性也很好的打包工具。特别是利用它的丰富的插件库，在项目结构比较固定的场合，基本能做到一个（份）配置文件，放到所有项目里都通用的效果。但是由于配置项比较多，而且版本间差异，通常都要试多次才能达到效果。也正是因为这样，许多新人在面对webpack的时候，都会选择逃避文档阅读，退而求其次，用ctrl+c/v来解决。

我就是那个笃信ctrl+c/v大法的新人。

最近的项目里用到许多公共文件，由于是用less直接编译成css的，所以很少会看最终的生成文件，那天临下班摸鱼的时候，打开文件，滚啊滚，突然发现有好多重复的代码，看起来是重复打包……遇到这种情况怎么办，邀请小伙伴一起来解决问题吗？No No No，当然要趁着没什么人发现，偷偷解决掉。

查看项目文件，发现用到很多公共的文件，比如config.less、mixins.less、common.less等等，还有一些两三个文件共用的部分，这些东西混杂在一起，共同编译出了一份css文件，可想而知，除了一些常用的config会直接替换/插入，其他比如extend出的样式，或者公用的模块样式，就被反复生成到目标文件中了。

less的处理方法

查看less的文档，发现对于这个问题是有解的。那就是用 reference关键字。

语法是这样

@import (reference) "foo.less";

除非用了mixins或者extended语法，其他的部分都不会生成到目标文件里。

但是除了config，通常还会有一大部分公共css还是要生成一次，不然header、footer都不显示可咋整？

less另外有关键字once，语法是这样

@import (once) "foo.less"; @import (once) "foo.less"; // this statement will be ignored

这个其实是默认值，就是说@import "foo.less";默认就会只引用一次，这里写出来，是为了区别multiple

@import (multiple) "foo.less"; @import (multiple) "foo.less";

这里，文件内容就会生成两次。

这几个关键字咋配合使用？

1、用reference写需要extend还有mixins元素，以及定义的变量，这些属于公共元素，但是不需要生成具体的css；

2、写一份公共的样式（common.less），然后在目标公共文件里（例如public.less或者类似的文件）引用一次。

这样，就能维护一份干净的配置文件，如果前端模式较固定，这份配置文件也能到处使用。

sass的处理方法

sass相对于less，更适合用gulp这类工具，配置项也相对比较简单，功能上也不输less。在模块化方面，sass采用了下划线开头的文件不生成css的方式：例如在public.scss里引用_common.scss，最终只会生成一份public.css文件。