最近，看了很多webpack的文章，我現在就把這些這幾天看到的內容做個彙總。大家可以先去webpack官方文檔瞭解一下：webpack中文網
什麼是webpack
本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程序需要的每個模塊，然後將所有這些模塊打包成一個或多個 bundle。
簡單來說，WebPack會分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其打包編譯爲合適的格式以供瀏覽器使用。
webpack的核心概念
Entry：入口，Webpack執行構建的第一步將從Entry開始，可抽象成輸入。
Module：模塊，在Webpack裏一切皆模塊，一個模塊對應着一個文件。Webpack會從配置的Entry開始遞歸找出所有依賴的模塊。
Chunk：代碼塊，一個Chunk由多個模塊組合而成，用於代碼合併與分割。
Loader：模塊轉換器，用於把模塊原內容按照需求轉換成新內容。
Plugin：擴展插件，在Webpack構建流程中的特定時機會廣播出對應的事件，插件可以監聽這些事件的發生，在特定時機做對應的事情。
webpack的工作流程
Webpack的運行流程是一個串行的過程，從啓動到結束會依次執行以下流程：
初始化參數：從配置文件和Shell語句中讀取與合併參數，得出最終的參數；
開始編譯：用上一步得到的參數初始化Compiler對象，加載所有配置的插件，執行對象的run方法開始執行編譯；
確定入口：根據配置中的entry找出所有的入口文件；
編譯模塊：從入口文件出發，調用所有配置的Loader對模塊進行翻譯，再找出該模塊依賴的模塊，再遞歸本步驟直到所有入口依賴的文件都經過了本步驟的處理；
完成模塊編譯：在經過第4步使用Loader翻譯完所有模塊後，得到了每個模塊被翻譯後的最終內容以及它們之間的依賴關係；
輸出資源：根據入口和模塊之間的依賴關係，組裝成一個個包含多個模塊的Chunk，再把每個Chunk轉換成一個單獨的文件加入到輸出列表，這步是可以修改輸出內容的最後機會；
輸出完成：在確定好輸出內容後，根據配置確定輸出的路徑和文件名，把文件內容寫入到文件系統。
在以上過程中，Webpack會在特定的時間點廣播出特定的事件，插件在監聽到感興趣的事件後會執行特定的邏輯，並且插件可以調用Webpack提供的API改變Webpack的運行結果。
Webpack的構建流程可以分爲以下三大階段：
初始化：啓動構建，讀取與合併配置參數，加載Plugin，實例化Compiler。
編譯：從Entry發出，針對每個Module串行調用對應的Loader去翻譯文件內容，再找到該Module依賴的Module，遞歸地進行編譯處理。
輸出：對編譯後的Module組合成Chunk，把Chunk轉換成文件，輸出到文件系統。
如果只執行一次構建，以上階段將會按照順序各執行一次。但在開啓監聽模式下，流程將變爲如下：
webpack的工作原理
簡單的說就是分析代碼，找到“require”、“exports”、“define”等關鍵詞，並替換成對應模塊的引用。
在一個配置文件中，指明對某些文件進行編譯、壓縮、組合等任務。把你的項目當成一個整體，通過一個給定的主文件index.js，webpack將從這個文件開始找到你的項目的所有的依賴文件，使用loaders處理他們，最後打包爲一個瀏覽器可以識別的js文件。
webpack的理念就是一切皆模塊化，把一堆的css文件和js文件放在一個總的入口文件，通過require引入，剩下的事情webpack會處理，包括所有模塊的前後依賴關係，打包、壓縮、合併成一個js文件，公共代碼抽離成一個js文件、某些自己指定的js單獨打包，模塊可以是css/js/images/font等等。
webpack的使用場景
1、根據模板生成HTML，並自動處理上面的css/js引用路徑
2、自動處理img裏面的圖片路徑，css裏面背景圖的路徑，字體引用
3、開啓本地服務器，一邊改寫代碼，一邊自動更新頁面內容
4、編譯jsx es6 sass less coffescript等，並添加md5、sourcemap等輔助
5、異步加載內容，不需要時不加載到DOM
6、配合vue.js react.js等框架開發
webpack打包實例詳解
現在我來把一個js項目改造成webpack打包的項目
新建index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>hello</h3>
<div id="root"></div>
<script src="./index.js"></script>
<script src="./js/header.js"></script>
<script src="./js/menu.js"></script>
<script src="./js/common.js"></script>
</body>
</html>
新建index.js文件
var dom = document.getElementById('root')
新建header.js文件，menu.js、common.js和header一樣，就不一一複述
var header = document.createElement('div')
header.innerText = 'header'
dom.append(header)
打開index.html，頁面展示如下圖所示，現在我們把這些東西用webpack打包
開始使用webpack打包
打開命令行初始化項目
npm init
輸入命令行後一路回車就行，會生成一個package.json
安裝webpack-cli、webpack
npm install webpack-cli --save-dev //--save-dev表示開發時候依賴的東西
npm install webpack --save //--save是開發之後還依賴的東西
–save-dev 則添加到 package.json 文件 devDependencies 鍵下
devDependencies 下的模塊，是我們開發時用的，在發佈後用不到它
–save會把依賴包名稱添加到 package.json 文件 dependencies 鍵下
dependencies 下的模塊，則是我們發佈後還需要依賴的模塊，譬如像jQuery庫或者vue框架類似的，我們在開發完後後肯定還要依賴它們，否則就運行不了。
修改index.js文件
import Header from './js/header'
import Common from './js/common'
import Menu from './js/menu'
new Header()
new Common()
new Menu()
修改header.js，common.js、menu.js同理
function Header (){
var dom = document.getElementById('root')
var header = document.createElement('div')
header.innerText = 'header'
dom.append(header)
}
export default Header
執行命令行，打包js
npx webpack index.js
此時會生成一個dist文件夾
我們在瀏覽器打開index.html文件，發現程序報錯
提示不能在不能在模塊外部使用import語句，說明我們在index.html引入還是index.js，我們要引入我們剛剛打包完成的dist裏面的main.js
這樣，一個簡單的webpack打包，就完成了。