webpack5

为什么引入webpack

必须了解ES6的模块化语法

ES6的模块化语法 - 掘金 (juejin.cn)

模块化必要性

希望一段代码有自己的作用域，没有命名冲突等

模块与脚本的区别

可以按需导入模块数据，但是不能按需导入脚本数据

模块语法

export 导出 import导入

1、定义变量同时暴露数据在声明符前面加上export

// 定义一个变量并暴露
export let name = 'doug';

// 定义一个函数并暴露
export function say()&#123;
    console.log('hello ' + name);
&#125;

// 定义一个类并暴露
export class Student &#123;
    constructor(name, age)&#123;
        this.name = name;
        this.age = age;
    &#125;
&#125;

// 定义一个函数，并不把它暴露出去, 其他模块从外部无法访问这个函数
function privateFunc()&#123;
    console.log('我是私有成员，没有被暴露出去，所以别人没有办法访问到我');
&#125;

对应的导入（导入的数据是没有办法直接改变的。但是可以间接的修改这个变量的值. 假如在模块 a 中定义了一个可以修改 name 值的函数, 则可以通过调用这个函数来修改 name 的值了）

import &#123; name, say &#125; from './a.js';

2、一次性导入一个模块暴露出来的所有数据，使用as对导入和导出的数据进行重命名

import * as aObj from './a.js'; // a 模块所有暴露出的数据都挂到了 aObj 上

// 通过 aObj 来访问和调用 a 模块中的变量和方法
console.log(aObj.name);
aObj.say();

// 导出
export &#123;say as speak&#125;;
//导入
import &#123; speak &#125; from './a.js'

3、默认暴露

// 导出 
// 1. 定义的时候就暴露
export default function()&#123;
    console.log('方法1暴露函数为默认值');
&#125;

// 2. 先定义后暴露
let name = 'doug';
export default name;

// 3. 将这个值用 as 命名为 default 暴露
class Student&#123; // ... &#125;
export &#123;Student as default&#125;;

// 导入
// 不用 &#123;&#125; 来包裹 不使用 as 关键字将默认值重命名
import familyName from './a.js';