webpack学习笔记:发展背景、工作机制、核心配置、性能优化

说明:根据B站学习视频 :【2020新课程】Webpack从原理到实战完整版-深入浅出,简单易学,前端工程师必学经典内容!学习整理,如有错误,欢迎随时指正,互相学习。
本次学习到的内容:

  1. webpack产生的背景
  2. 理解前端的模块化、模块化演变的过程
  3. 理解webpack打包的核心思路
  4. webpack核心:loader
  5. webpack核心:plugin

1 webpack是什么

一个现代JavaScript应用程序的静态模块打包器

  1. 默认:只对js进行处理,其他类型文件需要配置loader或者插件进行处理。
  2. 打包:将各个依赖文件进行梳理打包,形成一个JS依赖文件。

2 webpack产生的背景

首先,为什么打包?因为:

  1. 各个依赖文件的关系难以梳理,耦合程度较高,代码难以维护。
  2. 把所有依赖包都打包成为一个js文件(bundle.js)文件,会有效降低文件请求次数,一定程度提升性能。
  3. 逻辑多、文件多,项目复杂度提高
  4. 其他

然后,为什么要用webpack?因为:

  1. webpack除提供上述功能外,还充当了“翻译官”的角色,例如将ES6翻译为低版本的语法,将less、sass翻译为css等功能。
  2. 强大而灵活,plugin可插拔。
  3. 其他

3 先理解下前端模块化

类似于一个公司由各个部门组成,一个工程也由各个模块组成,高内聚低耦合,各司其职。先理解一下概念:

3-1 作用域

定义:运行时变量、函数、对象可访问性
作用域决定了代码中变量和其他资源的可见性

  1. 全局作用域:
    var a = 1;
    window.a; // 1
    global.a; // 1
  1. 局部作用域:
    function a(){
        var v = 1;
    }
    window.v; // undefined

如果在传统js写法中,引入多个script,就很容易造成全局作用域冲突而导致不可预测的问题:

	
    	
                    
                    

你可能感兴趣的:(webpack,javascript,reactjs,npm)