持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第6天，点击查看活动详情
1.什么是webpack
webpack是一个打包模块化js的工具。通过loader转换文件，plugin注入钩子，最后输出由多个模块合成的文件。
它主要是分析项目结构，找到js模块以及浏览器不能直接运行的拓展语言（TS，less等），并将其打包成合适的格式供浏览器使用。
2.webpack的优点
- 专注于模块化项目，开箱即用。
- 通过plugin扩展，灵活性更高。
- 生态好，社区庞大活跃。
- 使用场景不限于web开发。
3.webpack的构建流程
- 初始化参数：从配置文件和Shell语句中读取并合并参数。
- 开始编译：通过上一步得到的参数初始化对象的run方法开始执行编译。
- 确定入口：根据entry文件找到所有的入口文件。
- 编译模块：从入口文件触发，调用所有配置的lodar对模块进行翻译，再找出该模块所依赖的模块，然后递归本次步骤，直到所有入口依赖的文件都经过本次步骤的处理。
- 完成编译模块：处理每个模块被翻译的内容和他们之间的依赖关系。
- 输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个多个模块的chunk，再将每个chunk转化为一个单独的文件加入到输出列表。这一步是修改输出内容的最后机会。
- 输出完成：确定好输出的内容后，根据配置确定输出的文件名和路径，将文件内容写入到文件系统中。
4.webpack的热更新原理
热更新，缩写为HMR,可以在不刷新浏览器的情况下，将新变更的模块替换掉旧的模块。
就是webpack和浏览器之间维护一个websocket，当本地资源发生变化的时候，webpack会向浏览器推送更新，并带上构建时的hash，让浏览器与上一次的资源进行比对。
5.Webpack 与 grunt、gulp 的不同
- webpack是基于入口文件的；后两个是基于任务流的，类似于JQ的链式操作。
- webpack需要开发者找到入口文件，并清楚对于不同的资源使用什么样的lodar解析器；后两者需要开发者将前端构建过程拆分成多个“task”，并清楚“task”之间的关系。
6.说一说常见的lodar
- file-loader：把文件输出到一个文件夹中，在代码中通过相对URL去引用输出的文件。
- url-loader：和file-loader类似，可以在文件很小的情况下，以base64的形式把文件注入到代码中。
- css-loader：加载css文件
- style-loader：把css注入到js中
- image-loader：加载并压缩图片
- babel-loader：将ES6转化为ES5
- eslint-loader：检查代码格式
7.lodar与plugin的区别
lodar是加载器，因为原生的webpack只能解析js文件，lodar可以帮助webpack解析和加载非js文件。
plugin是插件，可以扩展webpack的功能，使其更加灵活。同时plugin可以监听webpack在运行的生命周期中广播的事件。
8.如何利用webpack来优化前端性能
- 压缩代码
- 抽取公共代码
- 删除无用代码
- 利用CDN加速
