Webpack到底怎么对我们的项目进行打包捏？
在webpack处理应用程序时，会根据命令或者配置文件找到入口文件
从入口开始，会生成一个依赖关系图，这个依赖关系图会包含应用程序中所需的所有模块（.js、css文件、图片、字体等）
遍历图结构，打包一个个模块（根据文件的不同使用不同的loader解析）
css-loader的使用
我们需要一个loader来加载css文件，但是loader是什么呢？
loader可以用来对模块的源代码进行转换
可以将css文件看成是一个模块，是通过import来加载这个模块的
在加载这个模块的时候，webpack不知道如何对其进行加载，我们必须制定对应的loader来完成这个功能
对于加载css文件来说，需要一个可以读取css文件的loader
这个loader最常用的是css-loader
css-loader的使用方案
如何使用这个loader来加载css文件呢？
三种方式：
内联方式
CLI方式（webpack5中不再使用）
配置方式
css-loader的安装：
npm install css-loader -D内联方式：
内联方式使用较少，因为不方便管理
在引入的样式前加上使用的loader并且使用！分割
import "css-loader!../css/style.css";CLI方式实际应用中也比较少使用，不方便管理
loader配置方式
配置方式表示的意思是在我们的webpack.config.js文件中写明配置信息
module.rules允许我们配置多个loader，因为我们也会继续使用其他的loader来完成其他文件的加载
这种方式可以更好的表示loader的配置，也方便后期的维护，让你对各个loader有一个全局的概览
module.rules的配置：
rules属性对应的值是一个数组
数组中存放的是一个个的Rule，Rule是一个对象，对象中可以设置多个属性
test属性：用于对resource进行匹配的，通常会设置成正则表达式
use：对应的值是一个数组
useEntry是一个对象，可以通过对象的属性来设置一些其他属性
loader：必须有一个loader属性，对应值是一个字符串
options：可选的属性，值是一个字符串或者对象，值会被传入到loader中
query：目前已经使用options来替代
传递字符串是loader属性的简写方式
loader属性：Rule.use:[{loader}]的简写
创建配置文件wk.config.js：
const path = require('path');
module.exports = {
// 设置打包的模式
mode: 'development',
// 设置入口文件
entry: './src/index.js',
// 设置输出
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
// 配置模块规则
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
};接下来进行安装（css-loader负责将.css文件进行解析，并不会将解析之后的css插入到页面中，如果再插入style中，那么还需要另外一个loader，就是style-loader）：
npm install style-loader安装完之后就可以运行npm run build进行打包了
use中多个Loader的使用顺序是从后往前
如果loader只有一个的话可以进行简写：
loader:"css-loader"处理less文件
const path = require('path');
module.exports = {
// 设置打包的模式
mode: 'development',
// 设置入口文件
entry: './src/index.js',
// 设置输出
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
// 配置模块规则
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader', 'css-loader'
]
},{
test: /\.less$/,
use:[ "style-loader","css-loader","less-loader"]
}
]
}
};处理less文件的配置文件是这样写的
收工入眠
