关于webpack我相信大多数前端工程师都很熟悉，并且也经常使用。但是呢，大多数的时候都是直接拿个脚手架直接一搭，配点东西就不管了，这种知其然而不知其所以然的状态让人很不舒服。所以趁着最近不忙，赶紧整一波；
webpack是干啥的？
用我自己理解的话就是，把项目中用到的多个文件，比如.js、.css、.less、.png等好多个文件，处理成一个或者几个文件，然后html只需要引用一下就完事了。
打包有啥用？
最明显的，一个页面加载一个js比起加载一堆js，一堆css，一堆图片速度快慢显而易见。还有你打包后的代码是压缩的，不容易被别人搞懂。传统的页面只要F12一下，用的啥框架，大概的结构基本都能摸清楚。按需加载，我用啥给我整啥，不用的不加到代码里，无形中减少了代码量。还有些别的好处（想起来在加，笑~）。
开始学呗
先整几个必不可少的配置项：
const path=require('path');// nodejs里面的路径模块
module.exports={
// 入口
entry:{
app:'./src/index.js',
},
// 输入
output:{
filename:'[name].bundle.js',
path:path.resolve(__dirname,'dist'),
},
// 文件解析器
module:{
rules:[]
},
// 插件
plugins:[],
}这四个是最关键的配置项：
entry就是告诉webpack从哪开始打包你的代码，这块必须有一个或者多个
output是告诉webpack我的代码打包完了叫啥（filename），在哪（path），该打包成几个（取决于entry有几个）
module是确定该如何处理css、less、png等一系列不是js的文件，常用的有css-loader、style-loader、file-loader等，具体的用法如下：
module:{
rules:[
{test:/\.(css|less)$/,use:['style-loader','css-loader']},
{test:/\.(png|svg|jpg|gif)$/,use:['file-loader']},
{test:/\.(woff|woff2|eot|ttf|otf)$/,use:['file-loader']}
]
},用正则来筛选后缀，use确定需要用到的loader，也有include等参数来确定处理哪个文件夹里面的文件
plugins是用来配置一些插件来辅助打包，注意这块是一个数组，里面的项都是new的一个实例
。。。未完待续
