随笔分类 - Webpack
摘要：1. noParse 作用主要是过滤不需要解析的文件，比如打包的时候依赖了三方库（jquyer、lodash）等，而这些三方库里面没有其他依赖，可以通过配置noParse不去解析文件，提高打包效率。 是module中的一个属性，设置一个正则表达式，过滤多个库以|分割 module: { noPars
阅读全文
摘要：处理 webpack 在编译过程中的某个特定任务的功能模块，plugins 选项用于以各种方式自定义 webpack 构建过程。其中webpack 附带了各种内置插件，可以通过 webpack.[plugin-name] 访问这些插件。 webpack 打包的整个过程，它并不直接操作文件，而是基于事
阅读全文
摘要：webpack 打包模块化后的应用程序，会生成一个可部署的 /dist目录，只要 /dist 目录中的内容部署到 server 上，client（通常是浏览器）就能够访问此 server 的网站及其资源。而最后一步获取资源是比较耗费时间的，这就是为什么浏览器使用一种名为 缓存 的技术。 通过命中缓存
阅读全文
摘要：懒加载或者按需加载，是一种很好的优化网页或应用的方式。实际上是先把代码在一些逻辑断点处分离开，然后在一些代码块中完成某些操作后，立即引用或引用另外一些新的代码块。这样加快了应用的初始加载速度，减轻了它的总体体积，因为某些代码块可能永远不会被加载。 在代码拆分的例子基础上，会在脚本运行时产生一个分离的
阅读全文
摘要：代码拆分能够将代码分离到不同的 bundle 中，然后可以按需加载或并行加载这些文件。代码拆分可以用于获取更小的 bundle，以及控制资源加载优先级，会影响加载时间。 常用的代码拆分方法： 入口起点：使用 entry 配置手动地分离代码。 防止重复：使用 CommonsChunkPlugin去重和
阅读全文
摘要：生产环境构建 development和production的构建目标差异很大。dev中，需要具有实时重新加载或HMR能力的 source map 和 server。而在prod中目标则关注更小的 bundle，更轻量的 source map，以及更优化的资源，以改善加载时间。由于要遵循逻辑分离，通常
阅读全文
摘要：Tree shaking 本质上为了消除无用的js代码，减少加载文件体积的方式，使其整体执行时间更短。无用的代码，又有另外一种叫法：Dead Code： 代码不可到达，不会执行，如不可能进入的分支，return 之后的语句等 代码中的某个变量只有写，而没有读操作 Tree Shaking 的执行环境
阅读全文
摘要：模块热替换 HMR 允许在运行时更新各种模块，而无需进行完全刷新。不适用于生产环境，意味着应当只在开发环境使用。启用HMR实际上就是更新 webpack-dev-server的配置，及使用 webpack 内置的 HMR 插件。 webpack官方文档中介绍，使用HMR时，需要满足两个条件： 配置d
阅读全文
摘要：webpack 用于编译 JavaScript 模块。安装完成，就可以通过 webpack 的 CLI或 API与其配合交互。**动态打包(dynamically bundle)**所有依赖项，创建所谓的依赖图(dependency graph)。每个模块都明确表述它自身的依赖，避免打包未使用的模块
阅读全文
摘要：终终终终于下定决心，对你下手了，系统的学习一下。 webpack是一个应用程序的静态模块打包器(module bundler)。处理应用程序时，会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 入口(e
阅读全文
摘要：近期项目部署遇到点问题，需要升级webpack版本，特此整理一小记，记录升级过程中的依赖包及报错处理。 本次升级的依赖包及对应版本对照表： | npm 包 | 当前版本 | 升级版本 | S/D | | | | | | | vue | ^2.5.18 | ^2.6.14 | -S | | eleme
阅读全文
摘要：通常来说，我们的代码都可以至少简单区分成业务代码和第三方库。如果不做处理，每次构建时都需要把所有的代码重新构建一次，耗费大量的时间。然后大部分情况下，很多第三方库的代码并不会发生变更(除非是版本升级)，因此Webpack 打包时，对于一些不经常更新的第三方库，比如 vue、vue-router，vu
阅读全文
摘要：一、什么是WebPack，为什么要使用它？ 模块打包机：分析项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（less,Scss,TypeScript等），并将其转换和打包为合适的格式供浏览器使用。可以使复杂的程序细化成为各个小的文件,为了简化开发的复杂度 二、web
阅读全文
浙公网安备 33010602011771号