这是我参与「第五届青训营 」伴学笔记创作活动的第 12 天
Webpack:
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
Webpack作用：
- 代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等等
- 文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等
- 代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载
- 模块合并：在采用模块化的项目有很多模块和文件，需要构建功能把模块分类合并成一个文件
- 自动刷新：监听本地源代码的变化，自动构建，刷新浏览器
- 代码校验：在代码被提交到仓库前需要检测代码是否符合规范，以及单元测试是否通过
- 自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统
Webpack 如何运行
- 首先，webpack 发现，我们并没有通过命令的形式，给它指定入口和出口
- webpack 就会去项目的根目录中，查找一个叫做
webpack.config.js的配置文件 - 找到配置文件后，webpack 就会解析执行这个配置文件，当解析执行完配置文件后，就得到了配置文件中，导出的配置对象
- 当 webpack 拿到配置对象后，就拿到了配置对象中，指定的入口和出口，然后进行打包构建
- 如果 webpack 发现既没有 webpack 命令 ，也没有配置文件，他就会报错
webpack使用ES6模块语法
ES6标准发布后，标准的使用是以export指令导出接口，以import引入模块，但是在我们一贯的node模块中，我们采用的是CommonJS规范，使用require引入模块，使用module.exports导出接口。
commonjs模块和es6模块最主要的区别：
1.commonjs模块是拷贝（能修改其值），es6模块是引用（只存在只读状态，不能修改其变量值）
2.CommonJS模块是运行时加载，ES6模块是编译时输出接口
