Webpack相关（Commonjs/ES6/）

概况

webpack 是代码编译工具，有入口、出口、loader 和插件。（核心部分：入口和出口）
webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。
当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。

主要功能【=>打包=》自动化配置全自动的执行我们需要的编译操作】

其天生就代码分割、模块化，webpack2.0中加入tree shaking，用来提取公共代码，去掉死亡代码。

主要构成

1. 入口
2. 出口
3. 加载器
4. 插件
5. F、webpack配置文件=》习惯性命名：webpack.config.js ||| webpackfile.js

什么是webpack

模块打包机：分析项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

webpack能干什么

根据入口文件的依赖，加载所有模块js，然后合并成一个js
标准且纯粹的模块化打包工具：依赖一个文件为入口打包所有依赖为当前浏览器可用的代码。

WebPack和Grunt以及Gulp相比有什么区别(工作方式)

Webpack和另外两个并没有太多的可比性：

1. Gulp/Grunt是一种能够优化前端的开发流程的工具
   • 工作方式：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。
2. WebPack是一种模块化的解决方案
   • 把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。
3. F、不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。

webpack使用ES6模块语法

CommonJS与ES6模块区别：

• ES6标准：以export指令导出接口，以import引入模块
• CommonJS规范：(node模块中)使用require引入模块，使用module.exports导出接口

commonjs模块和es6模块最主要的区别：

• commonjs模块是拷贝（能修改其值），es6模块是引用（只存在只读状态，不能修改其变量值）
• commonJS模块是运行时加载，ES6模块是编译时输出接口

语法区别：

• CommonJS：使用node运行js

//暴露数据方式1
module.exports = {a, b};
//暴露数据方式2
exports.a;
exports.b;
//引用数据
var t = require("./filename");
t.a;
t.b;

• ES6模块 （稍后使用webpack打包之后运行）

//作用：export和export default实现的功能相同
//即：可用于导出（暴露）常量、函数、文件、模块等，以便其他文件调用。

//区别：
//1、export导出多个对象，export default只能导出一个对象
//2、export导出对象需要用{ }，export default不需要{ }