我可以使用webpack分别生成CSS和JS吗？

Question

我有：

1. 我要捆绑的JS文件。
2. 我想编译为CSS的LESS文件（将@importshtml" target="_blank">解析为一个包）。

我希望将它们指定为两个单独的输入，并具有两个单独的输出（可能通过extract-text-webpack-
plugin）。Webpack具有所有合适的插件/加载器来进行编译，但似乎不喜欢这种分离。

我已经看到了一些人的示例，这些人直接从JS需要他们的LESS文件，例如require('./app.less');，其原因仅是告诉Webpack将这些文件包含到捆绑包中。这只允许您只有一个入口点，但是对我来说似乎真的很不对劲-
为什么当与我的JS代码无关的时候我在我的JS中要求LESS？

我尝试使用多个入口点，将入口JS和主LESS文件都交到其中，但是当使用多个入口点时，webpack会生成一个在加载时不执行JS的捆绑软件-
捆绑了所有东西，但不知道在启动时应该执行什么。

我只是使用webpack错了吗？我应该为这些单独的模块运行单独的webpack实例吗？如果我不打算将Webpack用于非JS资产，是否应该将它们打包使用？

Answer 1

如果我不打算将Webpack用于非JS资产，是否应该将它们打包使用？

也许不会。Webpack绝对是以js为中心的，并隐含地假设您正在构建的是js应用程序。它的实现require()允许您将所有内容都视为一个模块（包括Sass
/ LESS局部函数，JSON，几乎所有内容），并自动为您进行依赖项管理（require捆绑的所有内容，别无其他）。

当与我的JS代码无关时，为什么在我的JS中需要LESS？

人们之所以这样做，是因为他们正在用js定义其应用程序的一部分（例如React组件，Backbone
View）。该应用程序的一部分随附了CSS。依赖于一些单独构建且未直接从js模块引用的外部CSS资源，该资源易碎，更难使用，并且可能导致样式过时等。Webpack鼓励您保持所有内容模块化，因此拥有CSS
（Sass，随便什么）该js组件附带的部分，然后js组件使用require()它来使依赖关系清楚（对您和对构建工具而言，它永远不会构建不需要的样式）。

我不知道您是否可以使用webpack单独捆绑CSS（当未从任何js引用CSS文件时）。我确定您可以使用插件等将其连接起来，但不确定是否有可能立即使用。如果确实从js中引用CSS文件，则可以轻松地将CSS捆绑到带有Extract
Text插件的单独文件中，如您所说。