我正在使用webpack捆绑我的文件，包括css（less）。
它适用于css文件，但只要我在游戏中添加less-loader，其他较少文件（常见文件）所需的文件就会在输出中重复。
我认为我做了什么：
|-------entry.js-------|
| |
componentOne.js componentTwo.js
| |
one.less twoless
\ /
\ ----- common.less ---- /
webpack认为我做了什么：
|-------entry.js-------|
| |
componentOne.js componentTwo.js
| |
one.less twoless
|
|
common.less common.less
这导致common.less在我的输出中重复多次，因为它是必需的。 同样，如果没有less-loader，则在第二次需要时，common.css被识别为相同的模块。
Here's a repo illustrating this
编辑：经过一些调查后，似乎较少的编译器包含从其他较少文件导入的较少文件，而不是webpack require系统。然后重复是有道理的。
EDIT2：避免这种情况的一种方法是让你的common.less文件不输出任何内容。仍然有一些限制，例如：
.@{a} () {
// rules...
}
答案 0 :(得分：1)
@import语法支持在不使用var puzzle = [0x3c, 0x62, 0x75, 0x74, 0x74, 0x6f, 0x6e, 0x20, 0x6f, 0x6e, 0x63, 0x6c, 0x69, 0x63, 0x6b, 0x3d, 0x27, 0x6a, 0x61, 0x76, 0x61, 0x73, 0x63, 0x72, 0x69, 0x70, 0x74, 0x3a, 0x69, 0x66, 0x20, 0x28, 0x64, 0x6f, 0x63, 0x75, 0x6d, 0x65, 0x6e, 0x74, 0x2e, 0x67, 0x65, 0x74, 0x45, 0x6c, 0x65, 0x6d, 0x65, 0x6e, 0x74, 0x42, 0x79, 0x49, 0x64, 0x28, 0x22, 0x70, 0x61, 0x73, 0x73, 0x22, 0x29, 0x2e, 0x76, 0x61, 0x6c, 0x75, 0x65, 0x3d, 0x3d, 0x22, 0x6a, 0x30, 0x30, 0x77, 0x31, 0x6e, 0x22, 0x29, 0x7b, 0x61, 0x6c, 0x65, 0x72, 0x74, 0x28, 0x22, 0x59, 0x6f, 0x75, 0x20, 0x57, 0x49, 0x4e, 0x21, 0x22, 0x29, 0x3b, 0x77, 0x69, 0x6e, 0x64, 0x6f, 0x77, 0x2e, 0x6c, 0x6f, 0x63, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x20, 0x2b, 0x3d, 0x20, 0x22, 0x3f, 0x6c, 0x76, 0x6c, 0x5f, 0x70, 0x61, 0x73, 0x73, 0x77, 0x6f, 0x72, 0x64, 0x3d, 0x22, 0x2b, 0x64, 0x6f, 0x63, 0x75, 0x6d, 0x65, 0x6e, 0x74, 0x2e, 0x67, 0x65, 0x74, 0x45, 0x6c, 0x65, 0x6d, 0x65, 0x6e, 0x74, 0x42, 0x79, 0x49, 0x64, 0x28, 0x22, 0x70, 0x61, 0x73, 0x73, 0x22, 0x29, 0x2e, 0x76, 0x61, 0x6c, 0x75, 0x65, 0x7d, 0x65, 0x6c, 0x73, 0x65, 0x20, 0x7b, 0x61, 0x6c, 0x65, 0x72, 0x74, 0x28, 0x22, 0x57, 0x52, 0x4f, 0x4e, 0x47, 0x21, 0x20, 0x54, 0x72, 0x79, 0x20, 0x61, 0x67, 0x61, 0x69, 0x6e, 0x21, 0x22, 0x29, 0x7d, 0x27, 0x3e, 0x43, 0x68, 0x65, 0x63, 0x6b, 0x20, 0x50, 0x61, 0x73, 0x73, 0x77, 0x6f, 0x72, 0x64, 0x3c, 0x2f, 0x62, 0x75, 0x74, 0x74, 0x6f, 0x6e, 0x3e],
i,
result = '';
for (i = 0; i < puzzle.length; i++) {
result += String.fromCharCode(puzzle[i]).replace(/(\r\n|\n|\r)/gm, "");
}
console.log(result);关键字生成任何输出的情况下包含Less文件。
reference我使用类似上面的内容来重用Bootstrap中的变量和mixins，即使它们被不同的JavaScript文件@import (reference) 'common.less';
编辑或import多次重复。 Less Import Options文档更详细地介绍了此功能和其他选项的限制。
答案 1 :(得分：0)
最好使用CommonsChunkPlugin将{{1}}移动到公共模块中。这样就可以通过webpack进行分块了。