#### 1，webpack是一种前端【资源的构建工具】
##### 解释：能统一的处理资源，让资源称为浏览器能识别的东西的工具
#### 2，webpack是一种【静态模块打包工具】
##### 解释：把入口文件的所有依赖模块打包整合的工具
#### 3，webpack执行步骤
一，首先通过指定的entry入口文件开始，依次解析入口文件的所有依赖，形成一个chrunk块，
二，然后把chrunk块进,然后在moule中寻找各种所需要的依赖（css-loader,style-loader,less-loader等等）,
三，然后进行打包成bundle块，目的地是output指定文件路径的文件
##### 以下代码供分析(`webpack.config.js`)
~~~javascript
//webpack的配置文件
const {resolve} = require('path')
module.exports = {
//入口文件
entry:'./src/index.js',
//输出文件
output:{
//输出文件名
filename:'biult.js',
//输出文件路径 《__dirname表示当前文件的绝对路径,biuld表示文件夹下》
path:resolve(__dirname,'build')
},
//loader的配置
module:{
rules:[
{
//匹配那种文件
test: /\.css$/,
//使用哪些loader进行处理（【执行顺序是从右到左】）
use:[
//创建style标签，将样式插入到head标签中生效
'style-loader',
//将css文件编程commonjs模块加载到js中，里面是样式字符串
'css-loader'
]
}
]
},
plugins:[
//插件配置
],
//模式
mode:'development' //开发模式（不压缩代码）
// mode:'production' //生产模式 （压缩代码）
}
~~~
