什么是Webpack？（详细介绍）

Webpack​

webpack主要是打包，所以其核心存在两个部分，入口和出口，你可以把webpack加工想象成香肠加工厂，就是活猪进去，香肠出来的那种，但是如果每次加工都需要员工亲力亲为，那多麻烦那，所以我们考虑到了自动化配置。webpack存在功能类似的配置文件，让webpack通过配置，全自动的执行我们需要的编译操作。
​ ​webpack分成四个部分，期中最核心的就是入口和出口，当然在入口和出口配置的同时我们还需要一些加载器和插件，这就是我们所谓的webpack配置文件。这个配置文件我们习惯把其命名为webpack.config.js ，还有webpackfile.js ，

​ 总结一下，webpack共分为四个部分，这个概念一定要记好，本堂课就是围绕这四个配置进行展开的 :

* 入口  * 出口  * 加载器  * 插件

什么是webpack？

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

webpack能干什么？

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

WebPack和Grunt以及Gulp相比有什么区别？

Webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。

1.Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。

2.Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

webpack使用ES6模块语法

CommonJS与ES6模块区别：

ES6标准发布后，标准的使用是以export指令导出接口，以import引入模块，但是在我们一贯的node模块中，我们采用的是CommonJS规范，使用require引入模块，使用module.exports导出接口。
commonjs模块和es6模块最主要的区别：
       1.commonjs模块是拷贝（能修改其值），es6模块是引用（只存在只读状态，不能修改其变量值）
       2.CommonJS模块是运行时加载，ES6模块是编译时输出接口

语法区别：

CommonJS：使用node运行js

//暴露数据的页面
var num = 3; 
function fun() { 
return  "你好";
} 
module.exports = { 
fun,
num
}; 
//引用模块的页面
var demo=require("./demo")
console.log(demo.fun());
console.log(demo.num);

//------------exports暴露-----------------------
//暴露数据的页面
exports.num = 3;
exports.fun=function(){
return "你好";
}
//引用模块的页面
var demo=require("./demo")
console.log(demo.num);
console.log(demo.fun());

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

作用：

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

区别：

1、export导出多个对象，export default只能导出一个对象

2、export导出对象需要用{ }，export default不需要{ }，如：

//暴露模块export
export let num = 3;
export function fun() {
return "你好"
}
//使用模块
import { num,fun } from './demo';
console.log(num); 
console.log(fun());

 <!-- 页面引用 -->
 <script type="module" src="js.js"></script>
//····························
//使用export default
var text="你坏";
export default text;
//使用export default 
import model from "./model"
console.log(model);