什么是webpack？ 一句話概括：webpack是一個模塊打包工具（module bundler）。重點在於兩個關鍵詞“模塊”和“打包”。什么是模塊呢？我們回顧一下曾經的前端開發方式，js文件通過script標簽靜態引入，js文件之間由於沒有強依賴關系，如果文件1要用到文件2的某些方法或變量 ...

起步 在此之前我們先npm init初始化一個項目，本地安裝webpack和webpack-cli，然后在根目錄創建index.html、webpack.config.js和src文件夾，在文件夾內再創建一個main.js作為入口文件 准備工作完成后如圖所示： main.js ...

前言 該筆記是基於居玉皓老師的《Webpack實戰：入門、進階與調優》與webpack官方文檔的內容記錄的 入口起點 資源處理流程 在一切流程的最開始，我們需要指定一個或多個入口（entry），也就是告訴Webpack具體從源碼目錄下的哪個文件開始打包。 如果把工程中各個模塊的依賴關系 ...

置的，我們先理解四個核心概念：入口(entry)、輸出(output)、loader、插件(plugin ...

歡迎大家前往雲+社區，獲取更多騰訊海量技術實踐干貨哦~ 作者介紹：陳柏信，騰訊前端開發，目前主要負責手Q游戲中心業務開發，以及項目相關的技術升級、架構優化等工作。 前言 webpack 是一個強大的模塊打包工具，之所以強大的一個原因在於它擁有靈活、豐富的插件機制。但是 webpack ...

1、入口（Entry） entry 對象是用於 webpack 查找啟動並構建 bundle。entry 是應用程序的起點入口，從這個起點開始，應用程序啟動執行。如果傳遞一個數組，那么數組的每一項都會執行。入口起點(entry point) 指示 webpack 應該使用哪個模塊，來作為構建其內 ...

Tree Shaking 樹木搖晃：不用的js功能不打包 當有多個函數功能時，只調用了其中某一些函數，但是打包時，會統統全部打包，造成浪費，這個時候就要使用“搖樹”，將沒有用 ...

成少量的bundle(通常只有一個)，由瀏覽器加載。它是高度可配置的，在開始前需要先理解四個核心概念： ...