码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-12-20 13:44:45      阅读:224      评论:0      收藏:0      [点我收藏+]

标签:拆分   浏览器   ref   pos   bsp   编写   环境   src   命令   

   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:

   技术分享图片

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

标签:拆分   浏览器   ref   pos   bsp   编写   环境   src   命令   

原文地址:http://www.cnblogs.com/xuzhudong/p/8072360.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!