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可以实现按需加载,没有引用的模块不会被打包进来,减小了项目的包大小,缩短加载时间,用户体验更好。