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

在上面例子中,使用nodewebpack 会编译为用于「类 Node.js」环境(使用 Node.js 的require,而不是使用任意内置模块(如fspath)来加载 chunk)。

多个 Target

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

webpack.config.js:

优质内容筛选与推荐>>
1、windows下使用git管理github项目
2、冷镦钢 Kaltstauchstahl 易切削钢 Automatenstahl
3、Linux/Windows远程桌面
4、Setup Project 安装项目
5、实用技能型网络人才吃香 年薪10万


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号