webpack
学webpack就靠记忆、英文（报错都是英文的，挂就挂在一报错就懵圈） 报错了就多翻译，多报几次就会了 未来的Vue或者React都的用它
模块化开发：
不管下面3个有多大区别，核心点：就是他们如何做到的模块化方式。
简单点:如何导出，如何引入。
CommonJS node就遵循这套规范
module.exports 导出
require（） 引入
CommonJS规定，每一个JS都是单独的模块（模块是私有的：里面涉及的值、变量以及函数等都是私有的，和其它JS文件中的内容不冲突）
特点：
1. 所有代码都运行在模块作用域，不会污染全局作用域（每一个模块都是私有的，包括里面所有的东西都是私有的）
2. 模块可以多次加载，但是只会在第一次加载时运行一次，因为第一次加载的时候缓存了。如果想多次调用，必须清理缓存。（为了保证性能，减少模块代码重复执行的次数）
3. 模块加载顺序时按照其在代码中出现的顺序。CommonJS是同步操作
AMD require.js
Asynchronous Module Definition，即异步模块加载机制
CMD sea.js
CMD(Common Module Definition)表示通用模块定义
ES6模块化
import {fn} from './xx.js'; 引入模块
//xx.js
export function fn(){} 导出模块
// 写法一 export var m = 1
// 写法二 var m = 1; export {m}
// 写法三 var n = 1; export {n as m};
export function fn( ){ } 导出模块
/***************************************下面正是进入 webpack******************* 2018-12-25********************/
webpack可以看做是模块打包机，它做的事情是分析你的项目结构。
找到js模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等）。
并将打包为适合的格式以供浏览器使用。
1.代码转换：ts编译成js，把scss编译为css
2.文件优化：压缩js，css，html代码，压缩合并图片等
3.代码分割：提取多个页面的公关代码，提取首屏不需要的执行部分的代码让其异步加载
4.模块合并：在采用模块化的项目了会有很多个模块和文件，需要构建功能把功能模块分类合并成一个文件
5.自动刷新：监听本地源代码的变化。自动重新构建刷新浏览器
快速上手：
1.初始化项目（取名字的时候一定不要取工具的名字） npm init -y
2.安装webpack：(npm i webpack webpack-cli -D)
在全局安装：
npm i webpack -g 不建议。
建议在本地安装：
npm install webpack -save-dev
npm i webpack-cli -D
简写：npm i webpack -D
开发依赖：有些配置开发的时候使用，到了线上就不使用了
项目依赖：打包后上线需要的依赖 npm i xx -S
3.手动创建 webpack.config.js 文件
4.入口、出口、模块、插件
在package.json文件里"scripts"对象里写入"build":"webpack"。
npm run build （build，是自己起的要创建的文件夹的名字