美文网首页
webpack常见问题

webpack常见问题

作者: lixingyang | 来源:发表于2019-11-13 11:19 被阅读0次

    0.1. 什么是webpack?

    webpack是javascript应用程序的模块打包程序。Webpack递归地构建应用程序中的每个模块,然后将所有这些模块打包到少量的bundle中。

    0.2. webpack和其他构建工具(如gulp或grunt)之间的主要区别是什么?

    Webpack是一个模块打包器,虽然它经常用来代替Gulp或Grunt任务运行器。这种先进的工具为开发人员提供了对模块进行分割的控制,使他们能够根据特定情况调整构建,并且无法正常工作。

    比较Webpack和Grunt,第一个为现代前端项目提供了更多的灵活性和先进的功能。它带有一个功能核心,可以使用特定的装载机和插件进行扩展。本质上,它被用于将JavaScript模块与依赖关系捆绑到文件中,但对于具有大量非代码资产(图像,字体,CSS等)的复杂JavaScript应用程序,它可以提供很大的好处。

    在谈论Webpack vs Gulp vs Grunt的性能时,后者会查找与您的配置相匹配的文件的定义路径,而Webpack会分析整个项目。它查看所有的依赖关系,使用加载器处理它们,并生成捆绑的JS文件。

    0.3. webpack中的包是什么?

    bundle是webpack生成的输出文件。它包含应用程序中使用的所有模块。Bundles生成过程由webpack配置文件调整。

    0.4. webpack在哪个环境下工作?

    node.js

    0.5. 什么是entry观点

    入口对象是webpack看起来开始构建bundle的地方,此时应用程序开始执行。

    0.6. 什么是依赖关系图,webpack如何构建它?

    任何时候一个文件依赖于另一个文件,webpack会将其视为依赖关系。从入口点开始,webpack递归地构建一个依赖关系图,该关系图包含应用程序需要的每个模块,使用import和require语句,然后将所有这些模块打包成一个或多个包。

    概念问题一:什么是webpack和grunt和gulp有什么不同

    答案:Webpack是一个模块打包器,他可以递归的打包项目中的所有模块,最终生成几个打包后的文件。他和其他的工具最大的不同在于他支持code-splitting、模块化(AMD,ESM,CommonJs)、全局分析。

    概念问题二:什么是bundle,什么是chunk,什么是module?

    答案:bundle是由webpack打包出来的文件,chunk是指webpack在进行模块的依赖分析的时候,代码分割出来的代码块。module是开发中的单个模块。

    概念问题三:什么是Loader?什么是Plugin?

    答案:
    1)Loaders是用来告诉webpack如何转化处理某一类型的文件,并且引入到打包出的文件中
    2)Plugin是用来自定义webpack打包过程的方式,一个插件是含有apply方法的一个对象,通过这个方法可以参与到整个webpack打包的各个流程(生命周期)。

    配置问题:如何可以自动生成webpack配置?

    答案: webpack-cli /vue-cli /etc ...脚手架工具

    开发问题一:webpack-dev-server和http服务器如nginx有什么区别?

    答案:webpack-dev-server使用内存来存储webpack开发环境下的打包文件,并且可以使用模块热更新,他比传统的http服务对开发更加简单高效。

    开发问题二:什么 是模块热更新?

    答案:模块热更新是webpack的一个功能,他可以使得代码修改过后不用刷新浏览器就可以更新,是高级版的自动刷新浏览器。

    优化问题一:什么是长缓存?在webpack中如何做到长缓存优化?

    答案:浏览器在用户访问页面的时候,为了加快加载速度,会对用户访问的静态资源进行存储,但是每一次代码升级或是更新,都需要浏览器去下载新的代码,最方便和简单的更新方式就是引入新的文件名称。在webpack中可以在output纵输出的文件指定chunkhash,并且分离经常更新的代码和框架代码。通过NameModulesPlugin或是HashedModuleIdsPlugin使再次打包文件名不变。

    优化问题二:什么是Tree-shaking?CSS可以Tree-shaking吗

    答案:Tree-shaking是指在打包中去除那些引入了,但是在代码中没有被用到的那些死代码。在webpack中Tree-shaking是通过uglifySPlugin来Tree-shaking
    JS。Css需要使用Purify-CSS。

    相关文章

      网友评论

          本文标题:webpack常见问题

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