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

2024-03-11

I have:

  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 实例吗?如果我不打算将非 JS 资源混合到我的 JS 中,我是否应该使用 webpack?


如果我不打算将非 JS 资源混合到我的 JS 中,我是否应该使用 webpack?

也许不会。 Webpack 绝对是以 js 为中心的,隐含的假设是您正在构建的是一个 js 应用程序。其实施require()允许您将所有内容视为模块(包括 Sass/LESS 部分、JSON,几乎任何内容),并自动为您进行依赖项管理(您需要的所有内容)require是捆绑的,没有别的)。

为什么我的 JS 中需要 LESS ,而它与我的 JS 代码无关?

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

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

可以使用webpack分别生成CSS和JS吗? 的相关文章

随机推荐