Webpack
文章平均质量分 79
lamp_yang_3533
你又可以了
展开
-
Webpack 快速入门指南(一)
简介webpack 是一个前端资源加载/打包工具。webpack 是一个 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。webpack 可以将多种静态资源(js、css、...原创 2019-08-27 22:51:40 · 510 阅读 · 0 评论 -
Webpack 快速入门指南(二)
开发本指南继续沿用管理输出指南中的代码示例。如果你一直跟随之前的指南,应该对一些 webpack 基础知识有着很扎实的理解。在我们继续之前,先来看看如何建立一个开发环境,使我们的开发变得更容易一些。本指南中的工具仅用于开发环境,请不要在生产环境中使用它们!使用 source map当 webpack 打包源代码时,可能很难追踪到错误和警告在源代码中的原始位置。例如,如果将三个源...原创 2019-08-28 23:32:24 · 534 阅读 · 0 评论 -
Webpack 快速入门指南(三)
生产环境构建在本指南中,我们将深入一些最佳实践,并且使用工具,将网站或应用程序构建到生产环境中。配置开发环境(development)和生产环境(production)的构建目标差异很大。在开发环境中,我们需要具有强大的、实时加载或模块热替换能力的 source map 和 localhost server。在生产环境中,我们的目标则转向于关注更小的 bundle,更轻量的 s...原创 2019-08-29 23:32:39 · 291 阅读 · 0 评论 -
Webpack 代码分离
代码分离代码分离是 webpack 中最引人注目的特性之一。代码分离能把代码分离到不同的 bundle 中,然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的 bundle,以及控制资源加载优先级,如果使用合理,会极大影提高项目的性能。代码分离的三种方法:多个入口:配置多个入口(entry),手动分离代码。 防止重复:使用 CommonsChunkPlugin 去重、...原创 2019-09-01 19:35:06 · 273 阅读 · 0 评论 -
Webpack 懒加载
懒加载懒加载,也称作按需加载,是一种很好的优化网页或应用的方式。这种方式实际上是先把你的代码在一些逻辑断点处拆分,然后在一些代码块中完成某些操作后,立即引用或即将引用另外一些新的代码块。这样加快了应用的初始加载速度,减轻了它的总体体积,因为某些代码块可能永远不会被加载。示例在代码分离中的例子基础上,进一步做些调整来说明这个概念。那里的代码确实会在脚本运行的时候产生一个分离的代码块 lo...原创 2019-09-02 23:33:54 · 506 阅读 · 0 评论 -
Webpack 缓存
缓存使用 webpack 来打包我们的模块化后的应用程序,webpack 会生成一个可部署的 /dist 目录,然后把打包后的内容放置在此目录中。只要把 /dist 目录中的内容部署到服务器上,客户端(通常是浏览器)就能够访问此服务器的网站及其资源。获取资源是比较耗费时间的,这就是为什么浏览器使用一种名为缓存的技术。可以通过命中缓存,以降低网络流量,使网站加载速度更快,然而,如果我们在...原创 2019-09-03 22:18:17 · 375 阅读 · 0 评论