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

Question

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

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

我想我做的：

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

componentOne.js componentTwo.js
| |
one.less two.less
\ /
\ ----- common.less ---- /

webpack 认为我做了什么：

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

componentOne.js componentTwo.js
| |
one.less two.less
| |
common.less common.less

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

Here's a repo illustrating this

编辑：经过一些调查，似乎 less 编译器包含了从其他 less 文件导入的 less 文件，而不是 webpack require 系统。这样重复就有意义了。

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

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

Answer 1

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

Answer 2

@import 语法支持通过 reference 关键字包含 Less 文件而不生成任何输出的能力。

@import (reference) 'common.less';

我使用类似上面的方法重用 Bootstrap, even if they are imported or require'd multiple times by different JavaScript files. The Less Import Options 文档中的变量和混入，更详细地描述了此功能和其他选项的限制。

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

Avoiding output duplication using webpack, less-loader and extract-text-webpack-plugin

less

webpack