场景：面试的时候被反复问；做项目的时候对本地、线上理解不够；

参考：慕课视频webpack4.0，书《深入学习webpack》；公司项目代码

总结：这个webpack的学习，我大概是2月份开始的，一共花费了一个月左右看完视频，视频里面的课后作业是看webpack官网对应课程的内容，看完视频，官网差不多也看了一遍；3月份开始看书，大概也是花了一个月时间看完的，看书的时候，结合之前看视频的笔记，把书上提到的实战都自己一点一点做了一下；4月份的时候，搭建了webapck本地项目，写了loader、plugin，实现启动指定页面。

    接下来主要讲一下4月份做得事情，前面的视频和书的学习就不赘述了。

先讲webpack的本地搭建

1、新建3个文件

    其中，Index.html中有id为app的div标签用于show方法里面获取标签，main.js中引入了showwebpack的方法；

2、安装webpack和webpack-cli的脚手架

3、npm init初始化项目，生成package.json文件

4、在package.json中新增“scripts”脚本

5、npx webapck/npm run dev打包

或者

6、在index.html将打包文件引入

打开index.html

写webpack-Loader

    loader主要是对源件进行一个翻译转化；

    职责单一，只需关心输入输出，如果一个源文件需要多步转换，就通过多个Loader链式顺序执行实现；

    可以通过Npm安装，也可以通过Npm link或者resolveLoader实现加载本地Loader；

写的loader内容：

webpack.dev.config.js中相关配置：

写webpack-Plugin

    webpack运行的生命周期中会广播很多事件，Plugin可以监听这些时间，在合适的时机，通过Webpack提供的API改变输出结果。

实现启动某一个页面

    在项目中，不是每次用devserver起服务，都需要启动每一个页面的，一般都是启动指定路径的页面就可以了。这里写了一个方法，简单逻辑是：先获取代码输入的文件路径，生成一个正则表达式；遍历所有文件entries，只要正则匹配不到的路径全部删除。

第一步：获取到本项目的所有entries对象

第二步：获取到输入语句中的路径 --path形式传入

第三步：如果输入了路径，那么就用正则匹配获取入口文件数组中想要到路径

第四步：输出需要启动的入口路径

第五步：启动指定的单个页面