zoukankan      html  css  js  c++  java
  • webpack学习之—— 依赖图(Dependency Graph) 及 构建目标(Targets)

       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:

       

  • 相关阅读:
    python配置文件INI/TOML/YAML/ENV的区别
    Python中用requests处理cookies的3种方法
    【转】Jenkins报错ModuleNotFoundError: No module named fileName解决办法
    Python中用requests处理cookies的3种方法
    python – 为每个列表元素添加引号
    Python巧用正则表达式,完成接口参数替换
    Python中用OpenPyXL处理Excel表格
    LVM创建及管理
    springcloud --Nacos安装
    springcloud 启动错误
  • 原文地址:https://www.cnblogs.com/xuzhudong/p/8072360.html
Copyright © 2011-2022 走看看