创建型模式：创建对象的模式，抽象了实例化的过程 单例模式 什么是单例模式？ 单例模式定义：保证一个类仅有一个实例，并提供访问此实例的全局访问点。 单例模式用途 如果一个类负责连接数据库的线程池、日志记录逻辑等等，此时需要单例模式来保证对象不被重复创建，以达到降低开销的目的。 代码实现 需要指明的是，以下实现的单例模式均为“惰性单例”：只有在用户需要的时候才会创建对象实例。 ...

1、创建型模式：创建对象的模式，抽象了实例化的过程。 2、结构型模式：解决怎样组装现有对象，设计交互方式，从而达到实现一定的功能目的。例如，以封装为目的的适配器和桥接，以扩展性为目的的代理、装饰器。 3、行为型模式：描述多个类或对象怎样交互以及怎样分配职责。

为什么需要开发模式？ 借助webpack，在开发模式下我们可以使用热重载、路由重定向、代理服务器等功能，而source-map更是准确定位代码错误的利器。 0. 课程介绍和资料 »>本节课源码 »>所有课程源码 本节课的代码目录如下： 本节课用的 plugin 和 loader 的配置文件package.json如下： { "scripts"...

这是webpack4系列最后一篇教程了。这篇文章在之前所有教程的基础上，做了一个真正意义上的 webpack 项目！我花费了三个月整理了这份教程，并且完善了相关示例代码，也更熟悉 webpack 的理论和应用，当然，也感谢大家的支持。 好了，感慨完毕，开始正题 ? 作者按:这是webpack4系列最后一篇教程了。这篇文章在之前所有教程的基础上，做了一个真正意义上的 webpa...

简单来说：生产开发过程中优雅地自动化！！！ 在实际开发中，由于需求变化，会经常改动代码，然后用 webpack 进行打包发布。由于改动过多，我们/dist/目录中会有很多版本的代码堆积在一起，乱七八糟。 为了让打包目录更简洁，需要Clean Plugin，在每次打包前，自动清理/dist/目录下的文件。 除此之外，借助 webpack 命令本身的命令参数–Watch Mode：监察你...

在真实生产环境中，运行webpack进行打包后，完整的index.html应该是被自动生成的。例如静态资源、js 脚本都被自动插入了。而不是像之前的教程那样根据生成的文件手动插入。 为了实现这个功能，需要借助HtmlWebpackPlugin根据指定的index.html模板生成对应的 html 文件，还需要配合html-loader处理 html 文件中的<img>标签和属...

项目做大之后，开发者会更多专注在业务逻辑上，其他方面则尽力使用第三方JS库来实现。 由于js变化实在太快，所以出现了多种引入和管理第三方库的方法，常用的有 3 中： CDN：<script></script>标签引入即可 npm 包管理： 目前最常用和最推荐的方法 本地js文件：一些库由于历史原因，没有提供es6版本，需要手动下载，放入项目目录中，再...

在自己的项目中引入中意的字体样式，是让自己舒坦的重要方式 :) 源码地址如下： »>本节课源码 »>所有课程源码 0. 课程介绍和资料 »>本节课源码 »>所有课程源码 本节课的代码目录如下： 本节课的package.json内容如下： { "devDependencies": { "css-loader":...

1. 必须要说 1.1 开发背景 博主使用Vue开发的个人博客，博文使用markdown语法编写，然后交给前端渲染。为了更方便的进行说明和讲解，需要前端支持LaTex的数学公式，并且渲染好看的样式。 1.2 效果展示 数学公式分为行内公式和跨行公式，当然都需要支持和渲染。 我准备了 3 条公式，分别是行内公式、跨行公式和超长的跨行公式： $\alpha+\beta=\gamma$...

本节课会讲述webpack4中的图片常用的基础操作： 图片处理 和 Base64编码 图片压缩 合成雪碧图 0. 课程源码和资料 本次课程的代码目录(如下图所示)： »> 本节课源码 »> 所有课程源码 本节课会讲述webpack4中的图片常用的基础操作： 图片处理 和 Base64编码 图片压缩 合成雪碧图 1. 准备工作 ...