webpack
Walker_邹
前端开发 新媒体运营
展开
-
webpack 4 笔记七 代码拆分
代码拆分官方文档.代码拆分是webpack最引人注目的功能之一。此功能允许您将代码拆分为各种捆绑包,然后可以按需或并行加载。它可用于实现更小的捆绑并控制资源负载优先级,如果使用得当,可能会对加载时间产生重大影响。可用的代码拆分有三种通用的方法:Entry Points:使用entry配置手动拆分代码。Prevent Duplication:使用SplitChunksPlugin重复...原创 2019-04-04 21:24:00 · 330 阅读 · 0 评论 -
webpack 4 笔记二 管理资源之加载css、图片、字体、数据
根据 官方中文文档 继续学习。根据前文,已完成了 webpack 的初步构建,本章是将css、图片、字体、数据等资源结合到 wenpack 的一种尝试,会遇到什么 bug 呢?让我们拭目以待吧原创 2019-03-27 12:05:03 · 230 阅读 · 0 评论 -
webpack 4 笔记八 高速缓存
上一节中尝试了对输出的代码进行一个拆分,现在尝试一种叫做缓存的技术吧官方文档使用webpack捆绑我们的模块化应用程序,从而生成可部署的/dist目录。一旦将内容/dist部署到服务器,客户端(通常是浏览器)将访问该服务器以获取该站点及其资产。最后一步可能很耗时,这就是为什么浏览器使用一种称为缓存的技术。这使得站点可以更快地加载,减少不必要的网络流量,但是当您需要拾取新代码时,它也会导致令人...原创 2019-04-05 23:17:31 · 158 阅读 · 0 评论 -
webpack 4 笔记四 source map 与开发工具 webpack-dev-server
根据前文,完成了对输出文件的管理。现在,根据说明文档,建立一个开发环境,使开发变得更容易一些。主要是两个方面,一是使用 source map 来追踪错误和警告信息的位置,二是使用 webpack-dev-server 自动编译代码。使用 source map 追踪错误和警告信息当 webpack 打包源代码时,可能会很难追踪到错误和警告在源代码中的原始位置。例如,如果将三个源文件(a.js...原创 2019-04-01 15:40:08 · 858 阅读 · 0 评论 -
webpack 4 笔记五 模块热替换
随着深入学习,新的知识点不断出现,一些知识点可能涉及到很深的知识架构,这里只是简单的接触,并不深入,在以后深入使用时再做详细介绍。模块热替换模块热替换(Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新各种模块,而无需进行完全刷新。这里是他的一个详细概念。前面说了, 使用 webpack-dev-server 可以实现浏...原创 2019-04-02 10:28:47 · 570 阅读 · 0 评论 -
webpack 4 笔记六 关于tree shaking
tree shaking 是一个术语,通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)如果将应用程序比作一棵树。绿色表示实际用到的源码和 library,是树上活的树叶。灰色则表示无用的代码(dead-code),是秋天树上枯萎的树叶。为了除去死去的树叶,你必须摇动这棵树,使它们落下。tree shaking 的原理可以参考Tree-Shaking性...原创 2019-04-03 16:51:26 · 276 阅读 · 0 评论