webpack 学习笔记

Posted 2020-10-05

1. 背景

       前端已经从简单的页面展示逐渐向着大型的前端应用发展，自然前端应用的代码量以及各种资源都在不断地增加。如何解决浏览器快速显示，实现异步资源加载成为了一个要解决的问题。其次，随着前端代码量的增加，如何实现模块化开发或者多人写作并发开发，成为另外一个问题。当然，模块化开发才能实现模块化加载，如何整个前端代码都耦合在一起，很难实现异步加载。

2. 解决方案

      以下只涉及少量主流方案

     1.Requirejs

 1 //通过define实现模块的定义
 2 define([dependences],function(depModuls){
 3      return Module;
 4 });
 5 
 6 //通过require来引进模块
 7 require([dependences],function(depModules){});
 8 
 9 //懒加载路由模块
10 var component = function(resolve){
11     require(‘url‘,resolve);  
12 };
13 
14 //其他的按需加载
15 require([],function(){
16    if(ture){
17     require([],function(){})
18    } 
19 });

    2.ES6 模块

    <1> 尽量静态化，使得编译时就能确定模块的依赖关系，以及输入输出的变量

    <2>原生的浏览器没有实现该标准，新版的Dode.js才支持

期待的解决方案：不仅是javascript代码，还有css，图片，字体等资源也需要模块化。

3. webpack要解决的的问题

    <1>分块传输：按需进行懒加载，在实际应用中用到某些模块的时候在增量加载。

    要实现模块的按需加载，就需要一个对整个代码库中的模块进行静态分析，编译打包的过程。

    <2>JavaScript，Css，图片，html模板以不同的形式存在，如coffeeScript，Less，Sass,以及各种HTML模板。

    <3>让require能加载各种资源，分析出各个模块的类型和依赖关系，将不同类型的模块提交给适配的加载器来处理，还需要一个模块加载的兼容策略。

4.Webpack 介绍

    webpack是一个模块打包器，它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

    产生需求，现在的模块管理和打包工具并不适合大型的项目，尤其是单页面web应用程序。如何在一个大规模的应用中，维护各种代码的分割和存放，维护它们之间的依赖关系，并且无缝地将它们整合到一起生成适合浏览器端请求加载的静态资源。

   <1>将依赖拆分为按需加载的块

   <2>初始化加载的耗时尽量少

   <3>各种静态资源都可以视为模块

   <4>将第三方库整合成模块的能力

    <5>可以自定义打包逻辑的能力

    <6>适合大项目，无论是单页还是多页的web应用。

   一、代码拆分

   webpack 有两种组织模块依赖的方式，同步和异步。异步加载作为分割点，形成一个新的块。在优化了依赖数后，每一个作为一个文件被打包。

   二、Loader

  webpack本身只能处理原生的javascript模块，但是Loader转换器可以将各种类型的资源转换成JavaScript模块。

  三、智能解析

  webpack有一个智能解析器，几乎可以处理任何第三方库。

 四、插件系统

 五、快速运行

 webpack使用异步 I/O 和多级缓存提高运行效率，使得webpack快速增量编译。

待续。。。。