介绍：
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
使用：
webpack.config.js
entry代表打包的入口文件，output代表打包的输出文件的位置，但是output的路径是要写绝对路径，所以需要引入path模块
const path =require('path')
module.exports={
entry:'./main.js',
output:'bundle.js',
//必须是绝对路径
path:path.resolve(__dirname,'./build)'
//代表当前目录下build文件夹里面的bundle.js文件
}
loader
loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。
1、解析css文件（css-loader、style-loader）
我们写的很多css代码，当加载这些代码时webpack并不知道如何对其加载，必须使用对应的loader来完成这样的功能，这个loader最常用的是css-loader
css-loader的安装npm install css-loader -D
css-loader有三种使用方案，分别是内联方式、CLI方式（webpack5已不支持）、配置方式，我们使用最多的还是配置方式这里我就主要讲配置方式
const path =require('path')
module.exports={
entry:'./main.js',
output:{'bundle.js',
//必须是绝对路径
path:path.resolve(__dirname,'./build)'
//代表当前目录下build文件夹里面的bundle.js文件
}，
module:{
rules:[
{
test:/\.css$/,
use:[{loader:"css-loader"}]
}
]
}
}
那里面的use当没有options时，可以直接把laoder写成字符串的形式use:['css-loader']
仅仅使用css-loader是不行的，因为它只是负责将css文件进行解析，并不会将解析之后的css插入到页面中，也就无法起作用，如果我们希望完成插入style的操作我们还需要另一个loader就是style-loader,既然要使用它，就要安装，安装style-loader:npm install style-loader -D它的作用原理就是通过js创建一个style标签，把css放到style标签中，这时我们把use写成这样就可以了：
use:['style-loader','css-loader']注意webpack解析loader是从后往前解析的，所以css-loader一定要写在style-loader后面
2、解析less文件（less-loader、css-loader、style-loader）
我们都知道浏览器是不会识别到less文件的，要想less起作用必须让它变成css文件，我们使用less来把less文件转换为css文件，安装less:npm install less -D,使用npx less ./src/css/component.less > component.css可将less转换成css，但是我们实际开发中不可能这样对每个less文件运行一次转换的命令，这时我们使用less-loader,安装css-loader:npm install less-loader -D
综上处理less文件的配置可以这样写：
const path =require('path')
module.exports={
entry:'./main.js',
output:{'bundle.js',
//必须是绝对路径
path:path.resolve(__dirname,'./build)'
//代表当前目录下build文件夹里面的bundle.js文件
}，
module:{
rules:[
{
test:/\.less$/,
use:["style-loader","css-loader","less-loader"]
}
]
}
}
sass文件打包个less是差不多的，这里就不再详细赘述
