webpack学习之—— 依赖图(Dependency Graph) 及 构建目标(Targets)
任何时候,一个文件依赖于另一个文件,webpack 就把此视为文件之间有依赖关系。这使得 webpack 可以接收非代码资源(non-code asset)(例如图像或 web 字体),并且可以把它们作为依赖提供给你的应用程序。
webpack 从命令行或配置文件中定义的一个模块列表开始,处理你的应用程序。 从这些入口起点开始,webpack 递归地构建一个依赖图,这个依赖图包含着应用程序所需的每个模块,然后将所有这些模块打包为少量的bundle- 通常只有一个 - 可由浏览器加载。
对于HTTP/1.1客户端,由 webpack 打包你的应用程序会尤其强大,因为在浏览器发起一个新请求时,它能够减少应用程序必须等待的时间。对于HTTP/2,你还可以使用代码拆分(Code Splitting)以及通过 webpack 打包来实现最佳优化。
因为服务器和浏览器代码都可以用 JavaScript 编写,所以 webpack 提供了多种构建目标(target),你可以在你的 webpack配置中设置。
要设置target
属性,只需要在你的 webpack 配置中设置 target 的值。
webpack.config.js
在上面例子中,使用node
webpack 会编译为用于「类 Node.js」环境(使用 Node.js 的require
,而不是使用任意内置模块(如fs
或path
)来加载 chunk)。
尽管 webpack 不支持向target
传入多个字符串,你可以通过打包两份分离的配置来创建同构的库:
webpack.config.js:
优质内容筛选与推荐>>