[Javascript] 打包: webpack

webpack
https://github.com/webpack/webpack

webpack web
https://webpack.docschina.org/

webpack doc
https://webpack.docschina.org/concepts/

Webpack揭秘——走向高階前端的必經之路
https://juejin.im/post/5badd0c5e51d450e4437f07a

webpack-demos：全網最貼心webpack系列教程和配套代碼
https://segmentfault.com/a/1190000016740439

tree shaking
https://webpack.docschina.org/guides/tree-shaking/

Tree Shaking in Webpack
https://juejin.im/post/5c58df43e51d457ffc1bd065

webpack4.0 入門實踐
https://juejin.im/post/5bb089e86fb9a05cd84935d0

【webpack進階】視覺化展示webpack內部外掛程式與鉤子關係
https://juejin.im/post/5bb06c55e51d450e7c0d8ab9

【webpack進階】前端運行時的模組化設計與實現
https://juejin.im/post/5b82ac82f265da431d0e6d25

Webpack中使用babel的知識點整理
https://zhuanlan.zhihu.com/p/35378233

Webpack 中的 sideEffects 到底該怎麼用？
https://zhuanlan.zhihu.com/p/40052192

本質上，webpack 是一個現代 JavaScript 應用程式的靜態模組打包器(static module bundler)。在 webpack 處理應用程式時，它會在內部創建一個依賴圖(dependency graph)，用於映射到專案需要的每個模組，然後將所有這些依賴生成到一個或多個bundle。從 webpack 4.0.0 版本開始，可以不用通過引入一個設定檔打包專案。然而，webpack 仍然還是 高度可配置的，並且能夠很好的滿足需求。

tree shaking 是一個術語，通常用於描述移除 JavaScript 上下文中的未引用代碼(dead-code)。它依賴於 ES2015 模組系統中的靜態結構特性，例如 import 和 export。這個術語和概念實際上是興起於 ES2015 模組打包工具 rollup。

webpack 2 正式版本內置支援 ES2015 模組（也叫做 harmony 模組）和未引用模組檢測能力。新的 webpack 4 正式版本，則已擴展了這個檢測能力，通過 package.json 的 "sideEffects" 屬性作為標記，向 compiler 提供提示，表明專案中的哪些檔是 "pure(純的 ES2015 模組)"，由此可以安全地刪除檔中未使用的部分。


#webpack, JavaScript, html, css, bundler, tree shaking, dead-code, rollup, babel, 模組整合, 打包, 優化, 翻譯, 降轉, 壓縮