webpack
鸭绒
追求起点是大厂。
展开
-
webpack项目优化高级特性:代码分割、分块打包、动态导入、按需加载
文章目录1. 为什么要分块打包2. 代码分割2.1 多入口打包2.2 提取公共模块2.3 动态导入实现按需加载2.4 魔法注释3. 总结1. 为什么要分块打包通过 Webpack 实现前端项目整体模块化的优势固然明显,但是它也会存在一些弊端:它最终会将我们所有的代码打包到一起。试想一下,如果我们的应用非常复杂,模块非常多,那么这种 All in One 的方式就会导致打包的结果过大,甚至超过 4~5M。在绝大多数的情况下,应用刚开始工作时,并不是所有的模块都是必需的。如果这些模块全部被打包到一起,即便原创 2020-08-05 15:13:44 · 3763 阅读 · 5 评论 -
【告别普通打包】webpack打包结果优化特性:Tree Sharking 和 sideEffects
文章目录1. Tree Shaking(摇树)1.1 摇树讲解1.2 开启 Tree Shaking1.3 合并模块(扩展)1.4 探讨 babel-loader 的问题2. sideEffects2.1 sideEffects讲解2.2 sideEffects 作用2.3 sideEffects 注意今天我将和你分享 Webpack 的两个高级特性,分别是 Tree Shaking 和 sideEffects。它们都属于 Webpack 打包结果优化的必备特性,而且现在应用的也十分广泛。1. T原创 2020-08-05 14:09:33 · 1065 阅读 · 1 评论 -
webpack打包字体图标遇到的错误的解决方案
文章目录1.引出错误2.解决方案1.引出错误我这个静态网站项目利用了icommon提供的字体图标,直接对该项目进行打包报错。我在css文件应用“字体图标”:@font-face { font-family: "icomoon"; src: url("../fonts/icomoon.eot?raxfuq"); src: url("../fonts/icomoon.eot?raxfuq#iefix") format("embedded-opentype"), url("../f原创 2020-07-30 16:27:21 · 1658 阅读 · 0 评论 -
【webpack实战】对一个纯HTML、CSS品优购静态商城网站打包
前面写了一些关于webpack专辑的博客,在这里小试牛刀,对一个静态网站进行打包,做到学以致用。文章目录1.关于打包用到的资源与知识2.打包准备工作3.打包1.关于打包用到的资源与知识博客形式:品优购商城 如何使用webpack实现模块化打包?如何通过Loader实现特殊资源加载?实例加载css文件插件机制横向扩展webpack的构建能力 三个插件的使用实例2.打包准备工作1.查看项目文件2.进入项目所在的目录:3.在项目目录安装webpack由于 Webpack 是一个.原创 2020-07-30 16:06:38 · 2405 阅读 · 3 评论 -
webpack-dev-server实现静态资源加载和proxy代理
文章目录webpack Dev Server配置选项1.静态资源访问2.Proxy 代理小结webpack Dev Serverwebpack-dev-server 是 Webpack 官方推出的一款开发工具,根据它的名字我们就应该知道,它提供了一个开发服务器,并且将自动编译和自动刷新浏览器等一系列对开发友好的功能全部集成在了一起。Webpack 官方推出 webpack-dev-server 这款工具的初衷,就是为了提高开发者日常的开发效率,而且它是一个高度集成的工具,使用起来十分的方便。webp原创 2020-07-26 22:28:24 · 7661 阅读 · 0 评论 -
webpack运行机制与核心工作原理
文章目录1.前言2.工作过程简介3. 工作原理剖析1.前言webpack专辑:如何使用webpack实现模块化打包?如何通过Loader实现特殊资源加载?实例加载css文件开发一个Loader插件机制横向扩展webpack的构建能力 三个插件的使用实例开发一个清除文件注释的插件 (学习插件原理)通过上面的学习,我们已经对 Webpack 两个最重要的特性:Loader 和插件机制有了深入的了解,今天我们再来解读一下 Webpack 的运行机制和核心工作原理。2.工作过程简介Webpa原创 2020-07-26 21:31:52 · 5324 阅读 · 0 评论 -
webpack 开发一个清除文件注释的插件 (学习插件原理)
上一篇博客:插件机制横向扩展webpack的构建能力 三个插件的使用实例已经学习了三个常见的插件的使用实例,现在我们尝试着开发一个插件来理解实现插件的基本原理。1. 插件机制基本原理Webpack 的插件机制就是我们在软件开发中最常见的钩子机制。钩子机制也特别容易理解,它有点类似于 Web 中的事件。在 Webpack 整个工作过程会有很多环节,为了便于插件的扩展,Webpack 几乎在每一个环节都埋下了一个钩子。这样我们在开发插件的时候,通过往这些不同节点上挂载不同的任务,就可以轻松扩展 Webpa原创 2020-07-26 12:32:23 · 1729 阅读 · 0 评论 -
webpack使用copy-webpack-plugin插件遇到错误:Invalid options object. Copy Plugin has been initialized using an
使用copy-webpack-plugin插件遇到的报错:Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.-options[0] misses the property ‘patterns’. Should be:[non-empty string | object { from, to?, context?, glo原创 2020-07-26 00:06:25 · 9181 阅读 · 0 评论 -
webpack插件机制横向扩展webpack的构建能力 三个插件的使用实例
文章目录1.几个插件的常用应用场景2.体验插件机制2.1 自动清除输出目录的插件2.2 用于生成 HTML 的插件2.3 用于复制文件的插件上一篇博客分享了webpack的loader机制,今天分享另外一个重要的核心特性:插件机制。Webpack 插件机制的目的是为了增强 Webpack 在项目自动化构建方面的能力。通过上一篇博客的介绍你应该知道,Loader 就是负责完成项目中各种各样资源模块的加载,从而实现整体项目的模块化,而 Plugin 则是用来解决项目中除了资源模块打包以外的其他自动化工作,原创 2020-07-25 20:56:52 · 405 阅读 · 0 评论 -
【webpack专辑】开发一个Loader
Loader 作为 Webpack 的核心机制,内部的工作原理却非常简单。接下来我们一起来开发一个自己的 Loader,通过这个开发过程再来深入了解 Loader 的工作原理。这里我的需求是开发一个可以加载 markdown 文件的加载器,以便可以在代码中直接导入 md 文件。我们都应该知道 markdown 一般是需要转换为 html 之后再呈现到页面上的,所以我希望导入 md 文件后,直接得到 markdown 转换后的 html 字符串,如下图所示:由于这里需要直观地演示,我就不再单独创建一.原创 2020-07-24 20:50:06 · 378 阅读 · 0 评论 -
webpack常用的加载器使用实例
文章目录1.前言2. 如何加载资源模块2.1加载器的使用方式2.2 样式模块加载问题3. 为什么要在 JS 中加载其他资源4.常用的加载器1.前言Webpack 想要实现的是整个前端项目的模块化,项目中的各种资源(包括 CSS 文件、图片等)都应该属于需要被管理的模块。换句话说, Webpack 不仅是 JavaScript 模块打包工具,还是整个前端项目(前端工程)的模块打包工具。也就是说,我们可以通过 Webpack 去管理前端项目中任意类型的资源文件。因为 Webpack 实现不同种类资源原创 2020-07-23 21:21:33 · 708 阅读 · 0 评论 -
如何使用webpack实现模块化打包?
文章目录1.webpack的作用2.最基本的小案例2.1生成案例结构2.2 安装webpack2.3 运行命令打包js模块文件2.4 在index.html中引入打包文件2.5 打开页面尝试3.配置webpack的打包过程3.1 enter属性3.2 output属性4.Webpack 工作模式5. 打包结果运行原理1.webpack的作用Webpack 作为一个模块打包工具,本身就可以解决模块化代码打包的问题,将零散的 JavaScript 代码打包到一个 JS 文件中。对于有环境兼容问题的原创 2020-07-23 15:37:39 · 2994 阅读 · 0 评论