webpack 中的哪些常见概念

webpack 打包工具与 gulp、grunt的区别：

虽然这三个都是打包工具，但是webpack是一个模块，它可以递归的去解析打包，它可以对整个项目分析，遇到有依赖的模块，它会解析该模块的依赖，并且在解析依赖的时候再去加载依赖的依赖，一直到没有依赖。所以说webpack可以递归的去打包。

另一点不同是，webpack支持代码分割，这是gulp和grunt所不具备的。

还有一点不同是 webpack支持es module规范、commonJS、AMD规范。

gulp和grunt是同一个作者开发了都是任务流打包工具。

file 、chuck、module的区别：

file是webpack最终生成的单js文件。

chuck是webpack模块解析，代码分割，模块加载时候产生的中间物，分析打包的过程都叫做chuck。比如说在代码分割时候，可以根据chuck被依赖的次数来决定是否需要需要提取。

module项目中每个require或者import的都可以成为module。

loader 与 plugins的区别：

webpack将多种文件最后处理为html,js,css文件。
loader可以理解为转换器，是webpack处理多种文件格式的一种机制，负责把某种文件格式的内容转化为webpack可以支持打包的模块。比如css预处理器less\sass webpack不能直接处理，需要css-loader\style-loader\less-loader\sass-loader处理为webpack可以打包的文件。

webpack在构建打包的过程中，或者说打包的生命周期，对外暴露来很多钩子，用来开发者处理特殊需求，比如打包压缩，复制文件，压缩图片这些。都是由plugins来处理。

webpack搭建的本地服务 与 nginx反向代理服务有什么区别：

webpack的本地服务跑的代码实际上是放在内存中，所以webpack项目可以实现模块热更新。

nginx分享代理服务是将服务指向对应的项目文件夹，不是放在内存中。这是他们的区别之一。

什么是模块热更新

模块热更新是webpack的一个功能，它是怎么更新我们的代码的呢，我的理解是每当我们更新代码，内存的代码更新后就像浏览器推送，通知浏览器代码更新了，浏览器根据更新的代码渲染虚拟dom，并展现为真实的dom。

如何理解长缓存

在日常开发中，每次版本迭代，用户都需要下载新的代码文件，这样会增大用户的流量使用，如果我们把公共的部分，不常改动的部分提取出来，每次更新都更新新文件，公共文件不需要重新加载。这样就实现了长缓存。

tree shaking

简单的理解及时 tree shaking可以实现按需加载，没有引用的模块不会被打包进来，减小了项目的包大小，缩短加载时间，用户体验更好。