Webpack相关（Commonjs/ES6/）
司徒墨竹
概况
webpack 是代码编译工具，有入口、出口、loader 和插件。（核心部分：入口和出口）
webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。
当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。
主要功能【=>打包=》自动化配置全自动的执行我们需要的编译操作】
其天生就代码分割、模块化，webpack2.0中加入tree shaking，用来提取公共代码，去掉死亡代码。
主要构成
- 入口
- 出口
- 加载器
- 插件
- F、webpack配置文件=》习惯性命名：webpack.config.js ||| webpackfile.js
什么是webpack
模块打包机：分析项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
webpack能干什么
根据入口文件的依赖，加载所有模块js，然后合并成一个js
标准且纯粹的模块化打包工具：依赖一个文件为入口打包所有依赖为当前浏览器可用的代码。
WebPack和Grunt以及Gulp相比有什么区别(工作方式)
Webpack和另外两个并没有太多的可比性：
- Gulp/Grunt是一种能够优化前端的开发流程的工具
- 工作方式：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。
- WebPack是一种模块化的解决方案
- 把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。
- 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不需要{ }
类似资料：