步骤：
1、创建 export.js 是输出模块
2、创建 import.js 是导入模块
3、创建webpack.config.js 文件
4、编译 Webpack （需npm安装)
5、index.js 引入build/bundle.js文件
export 定义模块
export .js 文件
//输出1个变量
export let a = 12;
//输出多个变量
let girl = { "李雷雷": "14" };
let boy = ["韩梅梅", "14"];
export { girl, boy }
//输出函数
export function show() {
console.log("我是一个输出的函数！");
}
//输出class
export class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
showPerson() {
console.log(this.name, this.age);
return this.name, this.age;
}
}
//输出一个默认值
export default "我是一个默认值";
import 使用模块
import.js文件
//导入default模块
import Person from './Person'
console.log(Person)
//导入指定数据模块
import { girl, boy as m } from './Person'
console.log(m)
//只引入
import 'Person.css';
//异步引入
let p = import('./Person');//是个Promise引入，需要用await结束
//导入模块所有成员
import * as Person from './Person'
//输出数据
console.log(Person.a)
console.log(`${Person.girl}与${Person.boy}`)
Person.show();
let ps = new Person.Person("大王", "100")
ps.showPerson();
webpack编译
webpack.config.js
const path = require('path')
module.exports = {
mode: "development",
entry: "./js/index.js",
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
}
}
