课程链接

1. 立即执行函数

• 特点：执行结束，立即销毁；独立作用域
• 执行符号（）只能跟在表达式后面，不能放在函数声明后
• 分号可以写在前面/后面
• document为传入实参，doc为形参

;(function(doc){...const init = ()=>{bindEvent()}function bindEvent(){obj.addEventListener('click', onClick, false)}init()
})(document)

2. init函数

• 模块初始化函数init管理模块执行
• 用函数专门去绑定事件处理函数
• 在init中执行绑定事件处理函数
• 让功能性的东西能复用

3. webpack 自动化解决方案

3.1 npm init后生成package.json文件

{"name": "calculator-webpack","version": "1.0.0","description": "webpack study","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"repository": {"type": "git","url": "https://gitee.com/ying9481/calculator-webpack.git"},"keywords": ["webpack"],"author": "hyy","license": "MIT"
}

3.2 开发环境安装包

$ cnpm i -D webpack webpack-cli webpack-dev-server 
babel-loader@7 babel-core babel-preset-env 
babel-plugin-transform-runtime babel-plugin-transform-decorators 
babel-plugin-transform-decorators-legacy sass-loader node-sass 
css-loader style-loader ejs-loader html-webpack-plugin

3.3 path模块

path.resolve的每个参数，从左至右看成cd操作理解

3.4 use的执行顺序

从下到上、从右到左 → 先经过css-loader，再到style-loader

1、作用①：压缩代码，混淆js代码；
2、作用②：浏览器不支持ES5以上的语法，webpack可以安装一系列依赖包将之翻译成ES5
3、作用③：将less、sass编译成css
4、所需依赖：

1. 【三大件】webpack、webpack-cli（脚手架）、webpack-dev-server（开发者服务器插件）
2. 【六件套】处理ES6 ES7… 装饰器：
   . babel-loader@7、babel-core、babel-preset-env （babel8版本和babel-core不兼容）
   . babel-plugin-transform-runtime
   . babel-plugin-transform-decorators、 babel-plugin-transform-decorators-legacy
3. 【四大件】处理样式sass：
   . sass-loader、node-sass、css-loader、style-loader ( postcss-loader autoprefixer )
4. 处理模板：ejs-loader
5. 处理HTML: html-webpack-plugin

5、安装指令：

• –save-dev 简写 -D （安装在开发环境下的，线上不跑）
• –save 简写 -S （安装在生成环境下的，线上代码也需要的，如ejs）

6、配置安装包 webpack.config文件
特*：所有plugin结尾的依赖，一般要require导入、loader则不用
plugins: [ new HtmlWebpackPlugin( { } ) ]
7、 用命令跑配置文件webpack.config，在package.json的script里（跑脚本）
8、webpack的path模块 解决绝对路径
9、webpack上线时，mode变为production
10、export{ }用到了结构赋值

4.

• addEventListener
• 立即执行函数
• 绑定属性，getAttribute
• 装饰器
• 组件化（类的形式）
• proxy