>[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)