• 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:

       

  • 相关阅读:
    Unity3D 4.0 界面 基础 入门
    try catch finally 用法
    Mysql表引擎Innodb、MyIsam、Memory
    初步的kudu+impala vs dorisdb vs tidb
    mysql创建类似oracle的dblink
    jedis请求keys超时报错
    php 1223
    php 1214
    php 1216
    php 1222
  • 原文地址:https://www.cnblogs.com/xuzhudong/p/8072360.html
Copyright © 2020-2023  润新知