我可以使用webpack分别生成CSS和JS吗? [英] Can I use webpack to generate CSS and JS separately?
问题描述
我有:
- 我要捆绑的JS文件.
- 我想编译为CSS的较少文件(将@imports解析为一个包).
我希望将它们指定为两个单独的输入，并具有两个单独的输出(可能通过extract-text-webpack-plugin). Webpack具有所有合适的插件/加载器来进行编译，但似乎不喜欢这种分离.
I was hoping to specify these as two separate inputs and have two separate outputs (likely via extract-text-webpack-plugin). Webpack has all the proper plugins/loaders to do compilation, but it doesn't seem to like the separation.
我已经看到一些人的例子，这些人直接从JS需要他们的LESS文件(例如require('./app.less');)，除了告诉Webpack将那些文件包括在捆绑软件中之外，没有其他原因.这样一来，您只能有一个入口点，但对我来说似乎真的很不对头-为什么当与我的JS代码无关的情况下，为什么我的JS中需要LESS?
I've seen examples of people requiring their LESS files directly from JS, such as require('./app.less');, for no other reason than to tell webpack to include those files into the bundle. This allows you to only have a single entry point, but it seems really wrong to me -- why would I require LESS in my JS when it has nothing to do with my JS code?
我尝试使用多个入口点，将入口JS和主LESS文件都交到其中，但是当使用多个入口点时，webpack会生成一个不能在加载时执行JS的捆绑软件-它将所有捆绑在一起，但不会不知道在启动时应该执行什么.
I tried using multiple entry points, handing both the entry JS and main LESS file in, but when using multiple entry points, webpack generates a bundle that doesn't execute the JS on load -- it bundles it all, but doesn't know what should be executed on startup.
我只是使用webpack错了吗?我应该为这些单独的模块运行单独的webpack实例吗?如果我不想将它们混入我的JS中，我是否应该甚至将webpack用于非JS资产?
Am I just using webpack wrong? Should I run separate instances of webpack for these separate modules? Should I even be using webpack for non-JS assets if I'm not going to mix them into my JS?
推荐答案
如果我不将Webpack混入我的JS中，我应该甚至将webpack用于非JS资产吗?
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捆绑在一起的所有内容，别无其他)
Maybe not. Webpack is definitely js-centric, with the implicit assumption that what you're building is a js application. Its implementation of require() allows you to treat everything as a module (including Sass/LESS partials, JSON, pretty much anything), and automatically does your dependency management for you (everything that you require is bundled, and nothing else).
当与我的JS代码无关时，为什么在我的JS中需要LESS?
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()则使用它来使依赖关系清楚(对您和对构建工具而言，它永远不会构建不需要的样式).
People do this because they're defining a piece of their application (e.g. a React component, a Backbone View) with js. That piece of the application has CSS that goes with it. Depending on some external CSS resource that's built separately and not directly referenced from the js module is fragile, harder to work with, and can lead to styles getting out of date, etc. Webpack encourages you to keep everything modular, so you have a CSS (Sass, whatever) partial that goes with that js component, and the js component require()s it to make the dependency clear (to you and to the build tool, which never builds styles you don't need).
我不知道您是否可以使用webpack单独捆绑CSS(当未从任何js引用CSS文件时).我确定您可以使用插件等将其连接起来，但不确定是否有可能立即使用.如果您确实引用了js中的CSS文件，则可以轻松地将CSS捆绑到带有Extract Text插件的单独文件中，如您所说.
I don't know if you could use webpack to bundle CSS on its own (when the CSS files aren't referenced from any js). I'm sure you could wire something up with plugins, etc., but not sure it's possible out of the box. If you do reference the CSS files from your js, you can easily bundle the CSS into a separate file with the Extract Text plugin, as you say.
这篇关于我可以使用webpack分别生成CSS和JS吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
