根据其他博主的webpack面试题进行整理
什么是webpack
webpack是一个打包模块化javascript的工具，在webpack里一切文件皆模块，通过loader转换文件，通过plugin注入钩子，最后输出由多个模块组合成的文件，webpack专注构建模块化项目。 WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
webpack 和 gulp 的区别？
webpack是一个模块打包器，强调的是一个前端模块化方案，更侧重模块打包，可以把开发中的所有资源都看成是模块，通过loader和plugin对资源进行处理。
gulp是一个前端自动化构建工具，强调的是前端开发的工作流程，通过配置一系列的task（如代码压缩，合并，编译以及浏览器实时更新等），然后定义这些执行顺序，来让glup执行这些task，从而构建项目的整个开发流程。
webpack打包原理
把所有依赖打包成一个 bundle.js 文件，通过代码分割成单元片段并按需加载。
webpack构建过程
Webpack在启动后，会从Entry开始，递归解析Entry依赖的所有Module，每找到一个Module
，就会根据Module.rules里配置的Loader规则进行相应的转换处理，对Module进行转换后，
再解析出当前Module依赖的Module，这些Module会以Entry为单位进行分组，即为一个Chunk
。因此一个Chunk，就是一个Entry及其所有依赖的Module合并的结果。最后Webpack会将所
有的Chunk转换成文件输出Output。在整个构建流程中，Webpack会在恰当的时机执行Plugin
里定义的逻辑，从而完成Plugin插件的优化任务
什么是loader，什么是plugin
loader用于加载某些资源文件。因为webpack本身只能打包common.js规范的js文件，对于其他资源如css，img等，是没有办法加载的，这时就需要对应的loader将资源转化，从而进行加载。
plugin用于扩展webpack的功能。不同于loader，plugin的功能更加丰富，比如压缩打包，优化，不只局限于资源的加载。
几个常见的plugin和常见的loader
plugin:
html-webpack-plugin 打包结束后，在dist目录中自动生成一个html文件，并把打包生成的js自动引入到这个html文件中
clean-webpack-plugin 删除打包文件
webapck-dev-server 实现自动打包编译功能（将dist文件托管到内存中）,并开启热更新功能
loader:
css-loader 加载 CSS，支持模块化、压缩、文件导入等特性
style-loader 把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS
url-loader：在文件很小的情况下以 base64 的方式把文件内容注入到代码中去
babel-loader 把 ES6 转换成 ES5
source-map-loader 加载额外的 Source Map 文件，以方便断点调试
eslint-loader：通过 ESLint 检查 JavaScript 代码
什么是bundle，什么是chunk，什么是module
bundle：是由webpack打包出来的文件
chunk：是指webpack在进行模块依赖分析的时候，代码分割出来的代码块
module：是开发中的单个模块
什么是模热更新？有什么优点？
模块热更新是webpack的一个功能，它可以使得代码修改之后，不用刷新浏览器就可以更新。
优点：只更新变更内容，以节省宝贵的开发时间。调整样式更加快速，几乎相当于在浏览器中更改样式
webpack-dev-server 和 http服务器的区别
webpack-dev-server使用内存来存储webpack开发环境下的打包文件，并且可以使用模块热更新，比传统的http服务对开发更加有效。
什么是长缓存？在webpack中如何做到长缓存优化？
浏览器在用户访问页面的时候，为了加快加载速度，对用户请求的静态资源都会进行存储，但是每次代码更新或者升级的时候，我们都需要浏览器去加载新的代码。最方便的方法就是引入新的文件名称，只下载新的代码块，不加载旧的代码块，这就是长缓存。
在webpack中，在output输出的文件制定chunkhash，并且分离经常更新的代码和框架代码，通过NameModulesPlugin或者HashedModulesPlugin使再次打包文件名不变。
什么是Tree-sharking?
tree-sharking 是指在打包中去除那些引入了，但是在代码中没有被用到的那些死代码。它依赖静态的es6模块化语法，例如通过import和export default导入导出，css中使用Tree-shaking需要引入Purify-CSS
