一尘不染

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

css

我有:

  1. 我要捆绑的JS文件。
  2. 我想编译为CSS的LESS文件(将@imports解析为一个包)。

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

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

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

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


阅读 307

收藏
2020-05-16

共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插件的单独文件中,如您所说。

2020-05-16