webpack学习之—— 依赖图(Dependency Graph) 及 构建目标（Targets）

Posted 2020-10-18 baoyadong

   Dependency Graph

     任何时候，一个文件依赖于另一个文件，webpack 就把此视为文件之间有依赖关系。这使得 webpack 可以接收非代码资源(non-code asset)（例如图像或 web 字体），并且可以把它们作为依赖提供给你的应用程序。

     webpack 从命令行或配置文件中定义的一个模块列表开始，处理你的应用程序。 从这些入口起点开始，webpack 递归地构建一个依赖图，这个依赖图包含着应用程序所需的每个模块，然后将所有这些模块打包为少量的 bundle - 通常只有一个 - 可由浏览器加载。

    对于 HTTP/1.1 客户端，由 webpack 打包你的应用程序会尤其强大，因为在浏览器发起一个新请求时，它能够减少应用程序必须等待的时间。对于 HTTP/2，你还可以使用代码拆分(Code Splitting)以及通过 webpack 打包来实现最佳优化。

 

  构建目标(Targets)

    因为服务器和浏览器代码都可以用 javascript 编写，所以 webpack 提供了多种构建目标(target)，你可以在你的 webpack 配置中设置。

   用法

   要设置 target 属性，只需要在你的 webpack 配置中设置 target 的值。

   webpack.config.js

  

   在上面例子中，使用 node webpack 会编译为用于「类 Node.js」环境（使用 Node.js 的 require ，而不是使用任意内置模块（如 fs 或 path）来加载 chunk）。

  多个 Target

   尽管 webpack 不支持向 target 传入多个字符串，你可以通过打包两份分离的配置来创建同构的库：

   webpack.config.js：