使用webpack打包CSS

Question

我有几个NPM模块，我想使用webpack打包它们，这样我就不必使用CDN了。

我已经知道如何让.js文件工作，但我不知道如何让同一模块的.css文件工作。

例如，我有一个名为Bootstrap的NPM模块。在我的entry.js文件中，我有require('bootstrap');，但这只给我javascript文件。

我看到其他npm模块，如bootstrap-webpack等，但我不明白为什么如果我已经拥有node_modules中的bootstrap，我还需要下载另一个模块。同样的事情也适用于'font-awesome'、'animate.css'和'select2'等东西。

我错过了什么？

- Batman

---

请查看webpack loader，例如css-loader。 - Alfred

我看过它，但我真的不知道如何与NPM模块一起使用。如果我的 entry.js 已经有了 require('bootstrap')，那我是否需要再写一个 bootstrap.css？ - Batman

由于评论被延长了，我添加了一个答案。希望这有所帮助。 - Alfred

Answer 1

据我所知，Bootstrap支持commonJS模块加载器。因此，您可以使用require()加载bootstrap js文件。

当您使用require('bootstrap')时，将加载一个bootstrap的入口文件，该入口文件将加载库的另一些文件部分。（实际上，bootstrap入口文件仅加载一个文件/dist/js/bootstrap.js）[检查官方] repo（https://github.com/twbs/bootstrap/tree/master/dist/js））。

在这个过程中，如果bootstrap使用require('some.css')加载css，webpack会尝试加载css。但是，require('some.css')并不是通用方法。没有webpack或browserify或其他构建系统，css无法通过require()加载。这就是为什么您必须需要bootstrap-webpack的原因。

此外，bootstrap不仅适用于webpack，还适用于像requirejs（AMD）或< script >标记一样的常见环境。因此，您必须手动加载css，或者通过bootstrap-webpack的手段加载css。

- Alfred