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

Question

我有:

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

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

我见过一些人直接从 JS 中要求他们的 LESS 文件的例子，例如 require('./app.less');，除了告诉 webpack 包含这些文件之外没有其他原因文件到包中。这允许您只有一个入口点，但对我来说似乎真的错了——为什么我的 JS 中需要 LESS，而它与我的 JS 代码无关？

我尝试使用多个入口点，同时处理入口 JS 和主 LESS 文件，但是当使用多个入口点时，webpack 会生成一个不会在加载时执行 JS 的包——它将所有内容捆绑在一起，但不会'不知道在启动时应该执行什么。

我只是用错了 webpack 吗？我应该为这些单独的模块运行单独的 webpack 实例吗？如果我不打算将它们混合到我的 JS 中，我什至应该将 webpack 用于非 JS Assets 吗？

Answer 1

Should I even be using webpack for non-JS assets if I'm not going to mix them into my JS?

也许不是。 Webpack 绝对是以 js 为中心的，隐含的假设是你正在构建的是一个 js 应用程序。它的 require() 实现允许您将所有内容视为一个模块(包括 Sass/LESS 部分，JSON，几乎任何东西)，并自动为您进行依赖管理(您 require 是捆绑的，仅此而已)。

why would I require LESS in my JS when it has nothing to do with my JS code?

人们这样做是因为他们正在使用 js 定义应用程序的一部分(例如 React 组件、Backbone View )。该应用程序的那部分具有与之配套的 CSS。依赖于一些单独构建且不直接从 js 模块引用的外部 CSS 资源是脆弱的，难以使用，并且可能导致样式过时等。Webpack 鼓励您保持一切模块化，因此您有一个 CSS (Sass，无论如何)与该 js 组件一起使用的部分，以及 js 组件 require() 以使依赖项清晰(对您和构建工具而言，它永远不会构建您不构建的样式)不需要)。

我不知道你是否可以使用 webpack 自己捆绑 CSS(当没有任何 js 引用 CSS 文件时)。我相信你可以用插件等连接一些东西，但不确定它是否可以开箱即用。如果你确实从你的 js 中引用了 CSS 文件，你可以很容易地将 CSS 与 Extract Text 插件捆绑到一个单独的文件中，正如你所说的。