我可以使用 webpack 分别生成 CSS 和 JS 吗? [英] Can I use webpack to generate CSS and JS separately?
问题描述
我有:
- 我想捆绑的 JS 文件.
- 我想编译成 CSS 的 LESS 文件(将 @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?
推荐答案
如果我不打算将它们混合到我的 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 中需要 LESS，而它与我的 JS 代码无关?
why would I require LESS in my JS when it has nothing to do with my JS code?
人们这样做是因为他们正在用 js 定义他们的应用程序的一部分(例如一个 React 组件、一个主干视图).应用程序的这一部分具有与之配套的 CSS.依赖于一些单独构建而不直接从 js 模块引用的外部 CSS 资源是脆弱的，更难使用，并且可能导致样式过时等.Webpack 鼓励你保持一切模块化，所以你有一个 CSS(Sass，无论如何)与该 js 组件一起使用的部分，并且 js 组件 require()s 它使依赖关系清晰(对您和构建工具而言，它从不构建您不构建的样式)不需要).
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(当 CSS 文件未从任何 js 引用时).我确定你可以用插件等连接一些东西，但不确定它是否可以开箱即用.如果您确实从 js 中引用了 CSS 文件，则可以使用提取文本插件轻松地将 CSS 捆绑到一个单独的文件中，如您所说.
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屋！
