>[success] # webpack
1. 官方對webpack 的解釋 webpack?is a **static module bundler**?for **modern** JavaScript applications,**webpack是一個靜態的模塊化打包工具,為現代的JavaScript應用程序**
* **打包bundler**:webpack可以將幫助我們進行打包,所以它是一個打包工具
* **靜態的static**:這樣表述的原因是我們最終可以將代碼打包成最終的靜態資源(部署到靜態服務器);
* **模塊化module**:webpack默認支持各種模塊化開發,ES Module、CommonJS、AMD等;
* **現代的modern**:對于有環境兼容問題的代碼,Webpack 可以在打包過程中通**Loader 機制對其實現編譯轉換**,然后再進行打包,對于不同類型的前端模塊類型,Webpack 支持在 JavaScript 中以模塊化的方式**載入任意類型的資源文件**,例如,我們可以通過Webpack 實現在 JavaScript 中加載 CSS 文件,被加載的 CSS 文件將會通過 style 標簽的方式工作。
>[info] ## webpack 具備
* 根據官網圖片最簡單的理解就是將各種依賴文件最后分為四大塊

1. **webpack的理念就是一切皆模塊化**,把一堆的css文件和js文件放在一個總的入口文件,通過require引入,剩下的事情**webpack會處理**,包括所有模塊的前后依賴關系,打包、壓縮、合并成一個js文件,公共代碼抽離成一個js文件、某些自己指定的js單獨打包,模塊可以是css/js/imsge/font等等
2. **WebPack可以看做是模塊打包機**:它做的事情是,分析你的項目結構,找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言(Scss,TypeScript等),并將其轉換和打包為合適的格式供瀏覽器使用
>[danger] ##### 基本能力處理依賴、模塊化、打包
1. **依賴管理**:方便引用第三方模塊,讓模塊更容易復用、避免全局注入導致的沖突、避免重復加載或者加載不必要的模塊
2. **合并代碼**:把各個分散的模塊集中打包成大文件,減少HTTP的鏈接的請求次數,配合uglify.js可以減少、優化代碼的體積
3. **各種插件**:babel把ES6+轉化為ES5-,eslint可以檢查編譯時的各種錯誤
>[success] # webpack 術語
1. **module** 指在模塊化編程中我們把應用程序分割成的獨立功能的代碼模塊。
2. **chunk** 指模塊間按照引用關系組合成的代碼塊,一個 chunk 中可以包含多個module。
3. **chunk group** 指通過配置入口點(entry point)區分的塊組,一個 chunk group 中可包含一到多個 chunk。
4. **bundling** webpack 打包的過程。
5. **asset/bundle** 打包產物。
>[danger] ##### 可以參考
[極客時間視頻課學習筆記](https://time.geekbang.org/course/detail/100028901-97213)
[拉勾webpack鏈接](https://kaiwu.lagou.com/course/courseInfo.htm?courseId=88#/detail/pc?id=2262)
[文章的推薦](https://github.com/webpack-china/awesome-webpack-cn/pulls)
[以后要看的性能優化](https://juejin.im/post/5e53dbbc518825494905c45f)
[特別好的博客](https://survivejs.com/webpack/developing/getting-started/)
[webpack踩坑記錄不錯文章短小精煉](https://zhuanlan.zhihu.com/p/26262042)
[http://webpack.html.cn/loaders/raw-loader.html](http://webpack.html.cn/loaders/raw-loader.html)
>[danger] ##### 比較推薦的
[webpack 中那些最易混淆的 5 個知識點](https://juejin.im/post/6844904007362674701)
- 工程化 -- Node
- vscode -- 插件
- vscode -- 代碼片段
- 前端學會調試
- 谷歌瀏覽器調試技巧
- 權限驗證
- 包管理工具 -- npm
- 常見的 npm ci 指令
- npm -- npm install安裝包
- npm -- package.json
- npm -- 查看包版本信息
- npm - package-lock.json
- npm -- node_modules 層級
- npm -- 依賴包規則
- npm -- install 安裝流程
- npx
- npm -- 發布自己的包
- 包管理工具 -- pnpm
- 模擬數據 -- Mock
- 頁面渲染
- 渲染分析
- core.js && babel
- core.js -- 到底是什么
- 編譯器那些術語
- 詞法解析 -- tokenize
- 語法解析 -- ast
- 遍歷節點 -- traverser
- 轉換階段、生成階段略
- babel
- babel -- 初步上手之了解
- babel -- 初步上手之各種配置(preset-env)
- babel -- 初步上手之各種配置@babel/helpers
- babel -- 初步上手之各種配置@babel/runtime
- babel -- 初步上手之各種配置@babel/plugin-transform-runtime
- babel -- 初步上手之各種配置(babel-polyfills )(未來)
- babel -- 初步上手之各種配置 polyfill-service
- babel -- 初步上手之各種配置(@babel/polyfill )(過去式)
- babel -- 總結
- 各種工具
- 前端 -- 工程化
- 了解 -- Yeoman
- 使用 -- Yeoman
- 了解 -- Plop
- node cli -- 開發自己的腳手架工具
- 自動化構建工具
- Gulp
- 模塊化打包工具為什么出現
- 模塊化打包工具(新) -- webpack
- 簡單使用 -- webpack
- 了解配置 -- webpack.config.js
- webpack -- loader 淺解
- loader -- 配置css模塊解析
- loader -- 圖片和字體(4.x)
- loader -- 圖片和字體(5.x)
- loader -- 圖片優化loader
- loader -- 配置解析js/ts
- webpack -- plugins 淺解
- eslit
- plugins -- CleanWebpackPlugin(4.x)
- plugins -- CleanWebpackPlugin(5.x)
- plugin -- HtmlWebpackPlugin
- plugin -- DefinePlugin 注入全局成員
- webapck -- 模塊解析配置
- webpack -- 文件指紋了解
- webpack -- 開發環境運行構建
- webpack -- 項目環境劃分
- 模塊化打包工具 -- webpack
- webpack -- 打包文件是個啥
- webpack -- 基礎配置項用法
- webpack4.x系列學習
- webpack -- 常見loader加載器
- webpack -- 移動端px轉rem處理
- 開發一個自己loader
- webpack -- plugin插件
- webpack -- 文件指紋
- webpack -- 壓縮css和html構建
- webpack -- 清里構建包
- webpack -- 復制靜態文件
- webpack -- 自定義插件
- wepack -- 關于靜態資源內聯
- webpack -- source map 對照包
- webpack -- 環境劃分構建
- webpack -- 項目構建控制臺輸出
- webpack -- 項目分析
- webpack -- 編譯提速優護體積
- 提速 -- 編譯階段
- webpack -- 項目優化
- webpack -- DefinePlugin 注入全局成員
- webpack -- 代碼分割
- webpack -- 頁面資源提取
- webpack -- import按需引入
- webpack -- 搖樹
- webpack -- 多頁面打包
- webpack -- eslint
- webpack -- srr打包后續看
- webpack -- 構建一個自己的配置后續看
- webpack -- 打包組件和基礎庫
- webpack -- 源碼
- webpack -- 啟動都做了什么
- webpack -- cli做了什么
- webpack - 5
- 模塊化打包工具 -- Rollup
- 工程化搭建代碼規范
- 規范化標準--Eslint
- eslint -- 擴展配置
- eslint -- 指令
- eslint -- vscode
- eslint -- 原理
- Prettier -- 格式化代碼工具
- EditorConfig -- 編輯器編碼風格
- 檢查提交代碼是否符合檢查配置
- 整體流程總結
- 微前端
- single-spa
- 簡單上手 -- single-spa
- 快速理解systemjs
- single-sap 不使用systemjs
- monorepo -- 工程
- Vue -- 響應式了解
- Vue2.x -- 源碼分析
- 發布訂閱和觀察者模式
- 簡單 -- 了解響應式模型(一)
- 簡單 -- 了解響應式模型(二)
- 簡單 --了解虛擬DOM(一)
- 簡單 --了解虛擬DOM(二)
- 簡單 --了解diff算法
- 簡單 --了解nextick
- Snabbdom -- 理解虛擬dom和diff算法
- Snabbdom -- h函數
- Snabbdom - Vnode 函數
- Snabbdom -- init 函數
- Snabbdom -- patch 函數
- 手寫 -- 虛擬dom渲染
- Vue -- minVue
- vue3.x -- 源碼分析
- 分析 -- reactivity
- 好文
- grpc -- 瀏覽器使用gRPC
- grcp-web -- 案例
- 待續