webpack如何解析包含在bundle中的代码

时间:2016-09-12 08:57:45

标签: webpack

我想知道webpack如何选择要包含在捆绑包中的代码。

是否包含完整的.js文件或仅包含必要的代码?

使用外部库(如jQuery)时。它是包括完整包还是仅包含必要的功能?

webpack如何解析代码应该在最终捆绑中?

感谢。

1 个答案:

答案 0 :(得分:0)

  

是否包含完整的.js文件或仅包含必要的代码?

这取决于您是否将第三方代码与webpack捆绑在一起。 如果您只是从外部API(例如jQuery)加载静态资产,那么它就不会被捆绑,Webpack也不会知道任何相关信息。

但是,如果第三方代码(例如Jquery)存在于与Webpack捆绑的文件的依赖关系链中,那么其他模块导入的所有jQuery代码将与Webpack的其余模块捆绑在一起。 捆绑过程的结果是由所有模块组成的一个大文件,包括所依赖的任何第三方模块。

  

使用外部库(如jQuery)时。它包括吗?   完整的捆绑或只有必要的功能?

Webpack中的模块/依赖关系解析

通过映射出依赖关系图,Webpack能够以异步的顺序加载不同的模块。内部Webpack有自己的解析器,用于计算不同模块之间的依赖图。 webpack文档说明了

解析器帮助webpack找到需要包含在每个此类require / import语句的包中的模块代码。 然后,文档解释了解析器根据Webpack捆绑的文件中的导入引用的路径类型采用不同的方法。

  

解决过程非常简单,区分三者   请求类型:

     
      
  • 绝对路径:require(“/ home / me / file”),require(“C:\ Home \ me \ file”)
  •   
  • 相对路径:require(“../ src / file”),require(“。/ file”)模块路径:
  •   
  • require(“module”),require(“module / lib / file”)
  •   

有关Webpack如何解析模块的更多信息,请参阅this