美文网首页
webpack 中的哪些常见概念

webpack 中的哪些常见概念

作者: 尤小小 | 来源:发表于2018-11-20 18:16 被阅读19次

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

    相关文章

      网友评论

          本文标题:webpack 中的哪些常见概念

          本文链接:https://www.haomeiwen.com/subject/ixgxqqtx.html