メSerendipity - 博客园

webpack4.X源码解析之懒加载

摘要：本文针对Webpack懒加载构建和加载的原理，对构建后的源码进行分析。一.准备工作首先,init之后创建一个简单的webpack基本的配置,在src目录下创建两个js文件（一个主入口文件和一个非主入口文件）和一个html文件,package.json，webpack.config.js公共部分代阅读全文

posted @ 2021-02-20 17:24 メSerendipity 阅读(388) 评论(0) 推荐(1)

webpack4.X源码解析之esModule打包分析

摘要：入口文件index.js采用esModule方式导入模块文件，非入口文件index1.js分别采用CommonJS和esmodule规范进行导出。首先,init之后创建一个简单的webpack基本的配置,在src目录下创建两个js文件（一个主入口文件和一个非主入口文件）和一个html文件,pack 阅读全文

posted @ 2021-02-17 20:49 メSerendipity 阅读(837) 评论(0) 推荐(0)

webpack4.X源码解析之CommonJS打包分析

摘要：入口文件index.js采用CommonJS方式导入模块文件，非入口文件index1.js分别采用CommonJS和esmodule规范进行导出。首先,init之后创建一个简单的webpack基本的配置,在src目录下创建两个js文件（一个主入口文件和一个非主入口文件）和一个html文件,pack 阅读全文

posted @ 2021-02-16 16:51 メSerendipity 阅读(507) 评论(0) 推荐(1)

浅谈WEB前端规范化标准之ESlint

摘要：规范化标准软件开发需要多人开发,不同的开发者具有不同的编码习惯和喜好,不同的喜好增加项目的维护成本，所以需要明确统一的标准,决定了项目的可维护性,人为的约定不可靠,所以需要专门的工具进行约束，并且可以配合自动化工具进行检查，这种专门的工具称为lint, 前端接触最多的是ESLint，下面我们看下阅读全文

posted @ 2021-02-14 21:39 メSerendipity 阅读(882) 评论(0) 推荐(3)

浅谈Webpack模块打包工具四

摘要： Webpack 生产环境优化生产环境和开发环境有很大的差异，生产环境只注重运行效率,开发环境主要开发效率，webpack4.0开始提出了(mode)模式的概念针对不同的环境进行不同的配置,为不同的工作环境创建不同的配置。 Webpack不同环境下的不同配置,主要有两种形式： 1.配置文件根据环境阅读全文

posted @ 2021-02-09 22:12 メSerendipity 阅读(299) 评论(0) 推荐(0)

浅谈Webpack模块打包工具三

摘要： Source Map 生产代码与开发代码完全不同，如果需要调试应用的话会非常的麻烦,错误信息无法定位,Soutce Map就会逆向得到源代码, 须在打包之后的代码文件的末尾位置例如添加//# sourceMappingURL=jquery-3.4.1.min.map字段即开启sourceMap我们就阅读全文

posted @ 2021-02-08 21:48 メSerendipity 阅读(253) 评论(0) 推荐(0)

浅谈Webpack模块打包工具二

摘要： Webpack插件机制介绍 Loader专注实现资源模块加载，plugin解决其他自动化工作，比如清除dist目录，拷贝静态文件值输出目录,压缩输出代码等，下面列举几个plugin 的例子。 Webpack自动清除目录插件 Webpack常用插件clean-webpack-plugin 自动清除目录阅读全文

posted @ 2021-02-07 22:58 メSerendipity 阅读(204) 评论(1) 推荐(0)

浅谈Webpack模块打包工具一

摘要：为什么要使用模块打包工具 1.模块化开发ES Modules存在兼容性问题打包之后成产阶段编译为ES5 解决兼容性问题 2.模块文件过多网络请求频繁开发阶段把散的模块打包成一个模块解决网络请求频繁问题 3.支持不同类型的资源模块对于有兼容问题的代码,我们可以通过模块加载器（Loader）编阅读全文

posted @ 2021-02-06 18:56 メSerendipity 阅读(374) 评论(0) 推荐(0)

浅谈模块化开发

摘要：模块化开发当下最重要的开发范式,由于需求的日益复杂,把复杂的代码按照功能的不同分为不同的模块单独维护的方式，提高开发效率，降低维护成本。一.模块化的演进工程 1.首先我们回顾下前端模块化的演进过程第一阶段具体做法就是将每个功能及其相关状态数据各自单独放到不同的文件中，约定每个文件就是一个独阅读全文

posted @ 2021-02-04 22:13 メSerendipity 阅读(296) 评论(0) 推荐(0)

用gulp搭建并发布自己的cli脚手架

摘要：准备工作首先按照上节中gulp顺序安装的那个工程（代号A）删除掉node_modules 然后创建一个luckydog的空文件夹（代号B）按照脚手架模板安装之后（用脚手架模板安装比较快点），上传到github yarn global add zce-cli（zce-cli是未完成的一个脚手架模阅读全文

posted @ 2021-02-03 22:59 メSerendipity 阅读(314) 评论(0) 推荐(0)