Atitit 模块打包器(module bundler)的概念与使用 目录 1. 解决问题 1 1.1. 多js合并方便性能加载 1 1.2. 静态模块打包 2 1.3. 动态模块打包 2 2. 最

Atitit 模块打包器(module bundler)的概念与使用

 

目录

1. 解决问题 1

1.1. 多js合并方便性能加载 1

1.2. 静态模块打包 2

1.3. 动态模块打包 2

2. 最佳实践 2

2.1. 尽可能不要使用编译，要发挥脚本优势 2

2.2. 热更问题 cache查处 2

 

1. 解决问题
   1. 多js合并方便性能加载

 

a:模块化，让我们可以把复杂的程序细化为小的文件;

b:类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能能装换为JavaScript文件使浏览器可以识别；

c:scss，less等CSS预处理器

.........

这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的，这就为WebPack类的工具的出现提供了需求。

 

 

1. 1. 静态模块打包

 

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

 

1. 1. 动态模块打包

可以使用服务端js脚本技术 远程脚本，node python php这一类更加简单。。

定义后端loader（input1,input2,outputFile)  即可

 

 

 

1. 最佳实践
   1. 尽可能不要使用编译，要发挥脚本优势
   2. 热更问题 cache查处