模块化简单来说就是是指把一个复杂的系统分解到多个模块以方便编码。JS模块化的大致流程为：CommonJS（服务端） -> AMD（浏览器端）-> UMD（兼容了CommonJS和AMD） -> ES Module（ES6标准）。本文将从它们的用法进行介绍，简单实现其原理。并简易…

一. 什么是Tree-shaking 上图形象的解释了Tree-shaking 的本意，本文所说的前端中的tree-shaking可以理解为通过工具"摇"我们的JS文件，将其中用不到的代码"摇"掉，是一个性能优化的范畴。具体来说，在 webpack 项目中，有一个入口文件，相当…

本系列文章致力于让读者了解 webpack 模块化相关知识； 我们会从打包结果来探索 webpack 对模块化的具体处理方式。

Webpack 作为前端使用最广泛的打包工具（之一），它支持 CommonJS、AMD 和 ES module 模块化。本文将从源码分析 Webpack5 是如何帮助我们实现代码中支持CommonJS

webpack-chain 是什么？通过链式的方式修改webpack的配置。 一些列出本人常用的使用webpack-chain的方式修改webpack配置. 整个文件为： 有时候需要xx插件在aa插件之前调用。 有时候需要xx插件在aa插件之后调用。 webpack4.x默认使…

说起路由懒加载，大家很快就知道怎么实现它，但是问到路由懒加载的原理，怕有一部分小伙伴是一头雾水了吧。下面带大家一起去理解路由懒加载的原理。 路由懒加载也可以叫做路由组件懒加载，最常用的是通过import()来实现它。 然后通过Webpack编译打包后，会把每个路由组件的代码分割…

我们都知道，浏览器是无法识别commonjs规范的模块和es6 module的。将这些规范的模块转化为浏览器认识的语句就是webpack做的最基本事情，webpack 本身维护了一套模块系统，这套模块系统兼容了所有前端历史进程下的模块规范，包括 amd commonjs es6…

ES6前，js没有属于自己的模块规范，所以社区制定了 CommonJS规范。而NodeJS所使用的模块系统就是基于CommonJS规范实现的。 根据当前运行环境的判断，如果是 Node 环境 就是使用 CommonJS 规范， 如果不是就判断是否为 AMD 环境， 最后导出全局…

1. 创建一个vue项目 7. 选择测试框架 （Mocha + Chai） 8. 选择将这些配置文件写入到什么地方 (In dedicated config files) 选是的话，下次创建一个vue项目，可以直接使用这个预设文件，而无需再进行配置。 2. 全局组件自动注册 在…