面试题:
1.名字解释： bundle，chunk，module 是什么?
答案1:
1、module：开发中的每一个文件都可以看作是 module，模块不局限于js，也包含css，图片等
2、chunk：表示代码块，一个 chunk 可以由多个模块组成
3、bundle：最终打包完成的文件，一般就是和 chunk 一一对应的关系，bundle就是对 chunk 进行编译压缩打包等处理后的产出
2.说说webpack中常见的Loader？解决了什么问题？
答题模板:1.解释什么事loader 2.说出你用过或者了解的loader 3.说他们各自的特点和用途 4.说说你的亲身经历
答案2:loader用于对模块的"源代码"进行转换，在 import 或"加载"模块时预处理文件
webpack做的事情，仅仅是分析出各种模块的依赖关系，然后形成资源列表，最终打包生成到指定的文件中。
在webpack内部中，任何文件都是模块，不仅仅只是js文件
默认情况下，在遇到import或者load加载模块的时候，webpack只支持对js和json文件打包
像css、sass、png等这些类型的文件的时候，webpack则无能为力，这时候就需要配置对应的loader进行文件内容的解析,当 webpack 碰到不识别的模块的时候，webpack 会在loader配置的中查找该文件解析规则.
loader根据不同文件的编码分类,有很多种，手动配置并使用过的loader如下:
- style-loader: 将css添加到DOM的内联样式标签style里
- css-loader :允许将css文件用js引入，并返回css代码
- less-loader: 处理less
- sass-loader: 处理sass
- eslint-loader: 错误语法检测
- postcss-loader: 用postcss来处理CSS
- autoprefixer-loader: 处理CSS3属性前缀，已被弃用，建议直接使用postcss
- file-loader: 分发文件到output目录并返回相对路径
- url-loader: 和file-loader类似，但是当文件小于设定的limit时可以返回一个Data Url (比如base64编码的图片)
- html-minify-loader: 压缩HTML
- babel-loader :用babel来转换ES6文件到ES
- ts-loader :用typescript来转换TS文件到JS
3.webpack的cli配置中有--watch的观察模式 为什么还要配置服务?或者说devServer的优势是什么?
答案:devServer的功能是:当文件发生修改，通知各个模块进行更新加载，加载到计算机内存，刷新浏览器
1.项目中加载的东西很多.内存刷新 比磁盘刷新反应快
2.热更新使得开发调试效率更高
3.自动配置代理 比手动设计代理服务器更方便
4.webpack 的构建流程是什么?从读取配置到输出文件这个过程
答案:
webpack 的运行流程是一个串行的过程，从启动到结束会依次执行以下流程：
1、初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数
2、开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译
3、确定入口：根据配置中的 entry 找出所有的入口文件
4、编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理
5、完成模块编译：在经过第 4 步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系
6、输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的Chunk， 再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会
7、输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统，在以上过程中，webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用webpack 提供的API改变 webpack 的运行结果
5.如何利用 webpack 来优化前端性能
答案：
1、压缩代码。uglifyJsPlugin 压缩 js 代码， mini-css-extract-plugin 压缩css代码
2、利用 CDN 加速，将引用的静态资源修改为 CDN 上对应的路径，可以利用webpack对于 output 参数和 loader 的 publicpath 参数来修改资源路径
3、删除死代码（tree shaking），css 需要使用 Purify-CSS
4、 提取 公共 代码集成为模块 。
