Webpack介绍

1 webpack是什么？

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。便于项目进行模块化开发。
当 webpack 处理应用程序时，以一个文件作为入口，根据入口文件的依赖，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块（包括各种非js类型的资源文件），然后将所有这些模块打包成一个或多个 bundle。

2 webpack中导入导出模块

ES6标准：以export指令导出接口，以import引入模块。
代码示例：

// aa.js文件
export var m = 10;

export function add(a,b){
    return a+b;
}

// bb.js文件
import {m, add} from "./aa.js";
console.log(m);    // 输出10
console.log(add(1,5));    // 输出6

值得注意的是，在ES6模式下运行代码时，需要在package.json文件中加入"type": “module”，如图：

CommonJS标准：以require引入模块，以module.exports导出接口。
代码示例：

// aa.js文件
function add(a,b){
    return a+b;
}

var m = 1;

module.exports = { 
    add,
    m
}; 

// bb.js文件
var demo = require("./aa.js");
console.log(demo.m);     // 输出1
console.log(demo.add(1,9));    // 输出10