課程鏈接

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