在前端开发中，我们常常使用Webpack对项目进行打包和构建，而Webpack-require-css是一个可以将CSS打包进Webpack的插件。本文将介绍如何使用npm包Webpack-require-css和Webpack，打包CSS并应用于网页。
安装Webpack和Webpack-require-css
在使用Webpack-require-css之前，需要先安装Webpack和Webpack-require-css这两个npm包。
npm install webpack webpack-cli webpack-require-css --save-dev
通过使用--save-dev参数，将这两个包安装到开发环境中。
webpack-require-css的作用
使用Webpack-require-css，可以动态加载CSS，使得网页更加简洁，同时可以将CSS打包到Webpack中，方便管理。
配置Webpack-require-css
Webpack-require-css的配置十分简单，在Webpack配置文件中添加以下代码：
-- -------------------- ---- -------
----- ---------- - -------------------------------
-------------- - -
------- -
------ -
-
----- ---------
---- -------------------
-
-
--
-------- --------------
-通过以上配置，Webpack可以将CSS文件转换为Javascript，以便在网页中使用。
使用Webpack-require-css
接下来，我们将使用Webpack-require-css和Webpack构建一个简单的网页。假设我们有一个main.js文件和一个style.css文件，首先在main.js文件中引入style.css文件：
require('./style.css');然后，我们需要在HTML页面中引入打包后的Javascript文件和style.css文件，例如：
<body>
<div class="box">Hello World!</div>
<script src="bundle.js"></script>
<link rel="stylesheet" href="style.css">
</body>总结
本文介绍了如何使用npm包Webpack-require-css和Webpack，打包CSS并应用于网页。Webpack-require-css可以使网页更加简洁，同时可以将CSS打包到Webpack中，方便管理。通过学习本文，读者可以深入了解Webpack和Webpack-require-css的使用方法及其指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600554b781e8991b448d1eeb