webpack加载css文件及其配置
当我们写了几个css文件之后如果想要引用到html中去的话我们最开始的方式就是通过link标签将css文件导入进去，但是如果我们的css文件有很多的话，一个个的导入是不推荐的；而现在我们学了webpack，我们希望的是通过打包bundle.js文件，将所有的依赖文件全部导入进去。
我们要知道的是，如果在入口函数main.js文件中如果没有导入css文件，那么打包的bundle.js文件必然不会有css文件，所有我们需要让main.js文件依赖css文件。
使用代码：require(‘css文件地址’)
依赖完之后，我们再打包
Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具，它可以将各种资源，如JavaScript、CSS、图片等，转换和打包成一个或多个浏览器可执行的文件。在处理CSS文件时，Webpack 需要借助特定的加载器（Loader）才能正确地导入和打包CSS。在本篇文章中，我们将详细介绍如何配置 Webpack 来加载和处理CSS文件。
当我们在项目中创建了CSS文件后，传统的做法是通过`<link>`标签在HTML文件中引入。但这种方法在项目变得庞大时，管理起来并不方便。利用Webpack，我们可以将所有依赖项打包到一个或多个bundle.js文件中，包括CSS。不过，需要注意的是，如果不直接在JavaScript入口文件（例如main.js）中引入CSS，Webpack 默认是不会处理CSS文件的。
要使Webpack能够处理CSS，我们需要在入口文件中使用`require`或`import`语句引入CSS文件，例如：
```javascript
require('./styles.css');
```
然而，这样做后直接运行`npm run build`会遇到错误，提示缺少处理CSS文件类型的加载器。这是因为Webpack默认不支持CSS，需要安装相应的Loader来解析。
针对这个问题，我们需要安装两个重要的Loader：`css-loader`和`style-loader`。这两个Loader分别负责不同的任务。`css-loader`使得Webpack能够理解CSS语法，并将其转换为JavaScript模块。而`style-loader`则负责将转换后的CSS模块插入到HTML文档的`<head>`中，从而实现CSS的动态加载。
安装这两个Loader的命令如下：
```bash
npm install css-loader style-loader --save-dev
```
在Webpack的配置文件（webpack.config.js）中，我们需要对`module`属性进行配置，特别是其`rules`属性。`rules`是一个数组，每个规则对象代表一种文件类型及其对应的处理方式。对于CSS文件，配置如下：
```javascript
const path = require('path');
module.exports = {
mode: 'development', // webpack4.x 版本需要设置此属性
entry: './src/main.js', // 入口文件
output: {
path: path.resolve(__dirname, 'dist'), // 输出路径，必须是绝对路径
filename: 'bundle.js', // 输出文件名
},
module: {
rules: [
{
test: /\.css$/, // 匹配.css文件
use: ['style-loader', 'css-loader'], // 先用style-loader，然后是css-loader
},
],
},
};
```
这里的`test`属性用于定义匹配的文件类型，`use`属性是一个数组，按照从右到左的顺序加载Loader。尽管逻辑上应该是先用`css-loader`解析CSS，再用`style-loader`将CSS插入DOM，但在Webpack中，数组的加载顺序是从右到左，所以`style-loader`排在前面。
配置完成后，再次运行`npm run build`，Webpack 将能够正确处理CSS文件，将样式应用到页面上。至此，我们已经成功地配置了Webpack来加载和打包CSS文件。
总结一下，Webpack加载CSS文件的关键步骤包括：
1. 在入口文件中引入CSS。
2. 安装`css-loader`和`style-loader`。
3. 在Webpack配置文件中设置`module.rules`，指定处理CSS文件的Loader。
通过这种方式，可以方便地管理和打包项目的CSS资源，提高开发效率。同时，这也是现代前端开发中常见的工作流，对提升整体项目质量和可维护性至关重要。
