课程链接 时长统计

一、课程介绍

1. Webpack介绍

1.1 webpack 是什么？

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

    1.2 为什么要打包?

  • 逻辑多、文件多、项目复杂度提高。

  • loader，‘翻译官’
  • plugin，插件

强大且灵活d

2. 课程安排和学习建议

image.png

  • 重难点
    • 理解前端模块化
    • 理解打包核心思路
    • 理解‘关键人物’
  • 误区规避
    • 不要执着于 Api 和 命令
      • 因为Api是不太稳定的，版本一直在迭代，掌握核心原理才是关键，解决问题的机制，为了解决哪些问题。

二、Webpack的原理与背景

1. 理解前端模块化

  • 作用域
    • 变量 函数 对象 可访问性
  • 命名空间

  • 模块化优点（既是优点也是缺点）

    • 作用域封装
    • 重用性

    • 解除耦合

      1. /**
      2. * 标准模块写法
      3. */
      4. (function(window) {
      5.  // 不需要对外暴露的私有变量
      6. var name = 'module1';
      7. var other = 'version: 0.0.1';      
      8. function tell() {
      9.    console.log('name : ', name);
      10.    console.log('other : ', other);
      11. }
      13.  // 需要对外暴露的命名空间：module1Common
      14.  // 将其挂载在 window 上，并赋初始值 tell 方法
      15. window.module1Common = {tell};
      16. })(window)

2. 模块化方案进化史

AMD —> COMMONJS —> ES6 MODULE
image.png
image.png
image.png

3. Webpack的打包思路

3.1 webpack与立即执行函数的关系

安装方式

  1. npm install --save-dev webpack
  2. npm install --save-dev webpack-cli  # 使用 webpack 4+ 版本，你还需要安装 CLI。

3.2 webpack打包的核心逻辑

  • 打包过程
    • 从入口文件开始，分析整个应用的依赖树
    • 将每个依赖模块包装起来，放到一个数组中等待调用
    • 实现模块加载的方法，并把它放到模块执行的环境中，确保模块减可以相互调用
    • 把执行入口文件的逻辑放在一个函数表达式中，并立即执行这个函数

三、Webpack实战

1. 配置开发环境

1.1 npm与包管理器

  • 理解包管理器

    • npm会随着node的安装而安装

  • 熟悉npm核心特性

    • 初始化命令：npm init
    • package.json
      • main 包入口
    • 配置淘宝镜像源：npm config set registry [https://registry.npm.taobao.org](https://registry.npm.taobao.org)

  • 理解npm‘仓库’与‘依赖’的概念

    • 安装依赖包 --save 或 -S （默认添加此字段）与功能相关的依赖都应该放在 dependencies 中
    • 安装开发依赖包 --save-dev 或 -D ，放一些本地开发使用的包

  • 理解npm‘语义化版本’

    • ^version : 中版本和小版本
      • ^1.0.1 -> 1.x.x
    • ~version : 小版本
      • ~1.0.1 -> 1.0.x
    • version : 特定版本

  • 掌握使用npm自定义工程脚本的方法

2. Webpack构建工程

  • npm install 过程
    • 寻找包版本信息文件（package.json）,依照此进行安装
    • 查找 package.json 中的依赖，并检查项目中其他版本信息文件
    • 若发现了新包，就更新版本信息文件
  • npm init -y 所有配置都使用默认的配置项

3. Webpack核心特性

3.1 使用webpack构建简单的工程

  1. "devDependencies": {
  2.     "webpack": "^5.10.0",
  3.     "webpack-cli": "^4.2.0",
  4.     "webpack-dev-server": "^3.11.0"
  5.  }

3.2 了解webpack配置文件

  1. const path = require('path'); // 处理文件路径时需要用到的node的模块
  3. module.exports = {
  4.     entry: './app.js', // 工程资源入口文件
  5.     // 出口文件
  6.     output: {
  7.         path: path.join(__dirname, 'dist'), // 必须是绝对路径
  8.         filename: 'bundle.js'
  9.     },
  10.     devServer: {
  11.         port: 3000, // 指定服务端口
  12.         publicPath: '/dist'
  13.     }
  14. }

3.3 掌握“一切皆模块与loaders”的思想

loader是一种对于webpack的扩展，使得webpack除了可以打包js文件外，还可以打包其他文件（如：css、less、scss、png等）。
webpack内部并不包含任何loader，需要手动安装

3.3.1 css-loader

安装脚本：
npm install css-loader --save-dev
npm install style-loader --save-dev

loader内的属性rules的use属性配置顺序和加载顺序相反

3.3.2 uglifyjs-webpack-plugin

安装插件：
npm install uglifyjs-webpack-plugin --save-dev
减小代码体积，删去注释等无用代码

3.4 理解webpack中的“关键人物”

webpack仅能处理es5及以下的版本，webpack处理不了es6
es6 —> es5
安装插件：npm i @babel/core @babel/cli

4. loader 和 plugin

image.png

四、Webpack与前端性能

1. Webpack性能调优

1.1 打包结果优化

减少查找、减少解析

1.2 构建过程优化

1.3 Tree-Shaking

消除一些无用的js代码，自动分析module引入，移除没用的引用
消除一些不影响代码执行的冗余代码，tree-shaking是DCE的实现。

  • tree-shaking在测试环境不会完全删除无用代码，而是使用注释的方式
  • 但是在正式环境，tree-shaking会完全删除无用代码

五、课程总结

  • 前端发展的产物
  • 模块化打包方案

  • 工程化方案

  • 发展历程：

    • js里实现html，就是 jsx
    • 原生css不好用，就有了scss、less、stylus
    • 针对越来越强烈的模块化需求，社区有了AMD、commonJS、es6的module
    • 但是这些东西浏览器是不直接支持的，所以就有了其他babel之类的将之前的发展转化为浏览器支持的格式
    • 但是这之后项目越来越大，越来越复杂，我们就又寻找优化、压缩的方案
  • webpack为前端工程化提供了相对完整的、相对容易的解决方案