ES6 模块系统与webpack编译

步骤：
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'
    }
}