我有:

  1. 我想Bundle 的JS文件.
  2. 我想编译成CSS的文件更少(将@Imports解析为单个Bundle 包).

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

我看到过一些例子,人们直接从JS中获取较少的文件,比如require('./app.less');个,除了告诉webpack将这些文件包含到Bundle 包中之外没有其他原因.这只允许你有一个单一的入口点,但对我来说这似乎真的是错误的——当它与我的JS代码无关时,为什么我需要更少的JS?

我try 使用多个入口点,将入口JS和main LESS文件都交进go ,但当使用多个入口点时,webpack生成一个Bundle 包,它不会在加载时执行JS——它将所有内容Bundle 起来,但不知道启动时应该执行什么.

我是不是用错了webpack?我是否应该为这些单独的模块运行单独的webpack实例?如果我不打算将webpack混合到我的JS中,我还应该将它们用于非JSassets资源 吗?

推荐答案

如果我不打算将非JSassets资源 混入我的JS中,我甚至应该使用webpack吗?

也许不会.webpack绝对是以js为中心的,隐含地假设您正在构建的是一个js应用程序.它的require()实现允许您将所有内容视为一个模块(包括Sass/Less Partials、JSON,几乎任何内容),并自动为您执行依赖项管理(您require中的所有内容都是Bundle 的,没有其他内容).

当我的JS与我的JS代码没有任何关系时,为什么我在JS中要求更少呢?

人们这样做是因为他们正在使用js定义应用程序的一部分(例如,Reaction组件、主干视图).应用程序的该部分附带CSS.依赖于一些外部css资源,这些外部css资源是单独构建的,没有直接从js模块引用,这是脆弱的,更难处理,并且可能导致样式过时等等.webpack鼓励您保持一切模块化,所以您可以使用js组件附带的css(Sass,随便什么)部分,而js组件require()s它使依赖关系变得清晰(对于您和构建工具,它永远不会构建您不需要的样式).

我不知道您是否可以使用webpack自己Bundle css(当css文件没有从任何js引用的时候).我相信你可以用插件等来连接一些东西,但不确定它是否有可能开箱即用.如果您确实引用了js中的CSS文件,则可以像您所说的那样,使用提取文本插件轻松地将CSS绑定到一个单独的文件中.

Css相关问答推荐

基于子元素的子元素数量的样式元素

如何使2个元素的宽度相同?

如何在 CSS 中使 Flex 容器内的网格响应,而不 destruct 外部 Flex 容器的布局?

可以在 JavaFX CSS 中同时使用 dropshadow 和 insideshadow 吗?

如何在不使用 sx props 的情况下从 Select 样式中定位 mui paper 组件?

基于高度的容器查询不起作用

CSS 字符串变量的正确null值是多少?

不能在带有 SCSS 的过滤器灰度内使用 CSS 变量

如何在每一行周围放置不同大小的阴影?

如何使用 TailwindCSS 禁用环形阴影?

仅对父容器应用模糊效果

边界半径不起作用

媒体查询以错误的宽度触发

输入/按钮元素不会在 flex 容器中缩小

悬停效果:展开底部边框

完成后如何防止css3动画重置?

模拟显示:React Native 中的内联

带有一些 LESS 魔法的花式媒体查询

如何使用 CSS 消除元素的偏移量?

HTML浮动右元素顺序